<template>
  <div class="main" v-bind:class="{ preview: !editable }"  :style="{'font-family': formData.fontfamily+'!important'}">

    <div class="jnr">
       <p><span>分辨率：</span><em>1920*720</em></p>
       <!--<p><span>车辆信息：</span><em><i>一汽大众 CC</i><i>2020款 运动版</i><i>2.0T</i></em></p>-->
       <p><span>车辆信息：</span><em><i>{{vehicleInfo.brand}}</i><i>{{vehicleInfo.series}}</i><i>{{vehicleInfo.deploy}}</i></em></p>
      <!-- <p><span>车辆信息：</span><em>{{vehicleInfo.brand}}</em></p> -->
    </div>

    <!-- 中间内容 -->
    <template v-if="passive">
      <!-- 背景图 -->
      <div v-on:click="handleImgSelectBg($event, 'voice', 'bg_common')" class="player aui-flex-col"
           v-bind:class="{ filter: isFilter, scale: isScale, scale_: isScale_ }"
           v-bind:style="{width: pW + 'px', height: pH + 'px',backgroundImage: iconsFlag.bg_common ? getBgImgUrl_(iconsFlag.bg_common) : getBgImgUrl('voice/bg_common.png')}">

        <!-- 顶部导航 -->
        <div class="jmain_top">
          <div class="jmain_top_l">

            <div class="jmain_top_l_01">
              <img v-if='!iconsFlag.jmain_top_l_01' class="" :src="getImgUrl('icon/top/home.svg')"/>
              <svg class="" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd"
                      d="M27 29H19.6667V24.3571C19.6667 23.1389 19.6722 21.8045 18.9214 21.005C18.1661 20.2101 17.1495 19.7143 16 19.7143C13.7001 19.7143 12.3333 21.9215 12.3333 24.3571V29H5V14.1429L16 3L27 14.1429V29Z"
                      :fill="formData.colorNormal"
                />
              </svg>
            </div>

            <div class="jmain_top_l_02 ">
              <img class="" :src="getImgUrl('icon/top/nav.svg')"/>
              <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path :fill="formData.colorNormal" clip-rule="evenodd" d="M29 3L3 9.93333L16 16L22.0667 29L29 3Z"
                      fill-rule="evenodd"/>
              </svg>
            </div>

            <div class="jmain_top_l_03 ">
              <img class="" :src="getImgUrl('icon/top/usb.svg')"/>
              <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path :fill="formData.colorSelected" clip-rule="evenodd"
                      d="M28.8843 10.325L26.0597 13.143L24.8243 11.9026L26.0647 10.6655C26.1595 10.5708 26.1586 10.4156 26.0613 10.3183L24.7732 9.02509C24.6767 8.92864 24.5216 8.92613 24.4268 9.0209L23.1864 10.2588L21.7498 8.8171L22.9902 7.57921C23.085 7.48444 23.0833 7.32928 22.9868 7.232L21.7045 5.94547C21.6081 5.84818 21.4529 5.8465 21.3582 5.94127L20.1178 7.17916L18.8766 5.93289L21.7012 3.11493C21.8572 2.95893 22.1121 2.96229 22.2706 3.12164L28.8792 9.75474C29.0386 9.91409 29.0402 10.169 28.8843 10.325ZM26.3968 15.4057L12.8852 28.885C12.7292 29.041 12.4743 29.0376 12.3158 28.8791L3.12078 19.6495C2.96144 19.4901 2.95976 19.2351 3.11575 19.0792L16.6273 5.59993C16.7833 5.44394 17.0383 5.44729 17.1976 5.60664L26.3918 14.8354C26.5511 14.9948 26.5528 15.2506 26.3968 15.4057Z"
                      fill-rule="evenodd"/>
              </svg>
            </div>

            <div class="jmain_top_l_04 ">
              <img class="" :src="getImgUrl('icon/top/video.svg')"/>
              <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path :fill="formData.colorNormal" clip-rule="evenodd"
                      d="M17.1406 23.3921V26.9606H18.6641V28.9999H13.5859V26.9606H15.1094V23.3921C11.0314 23.2799 8 19.4636 8 15.2354V14.2157H10.0312V15.2354C10.0312 18.4196 12.0186 21.3527 15.1094 21.3527H17.1406C20.2314 21.3527 22.2188 18.4196 22.2188 15.2354V14.2157H24.25L24.1939 15.3573C24.1939 19.5847 21.2194 23.2799 17.1406 23.3921Z"
                      fill-rule="evenodd"/>
                <path :fill="formData.colorNormal" clip-rule="evenodd"
                      d="M16.125 3C18.3683 3 20.1875 4.81919 20.1875 7.0625V15.2517C20.1875 17.495 18.3683 19.3142 16.125 19.3142C13.8817 19.3142 12.0625 17.495 12.0625 15.2517V7.0625C12.0625 4.81919 13.8817 3 16.125 3Z"
                      fill-rule="evenodd"/>
                <path :fill="formData.colorNormal" clip-rule="evenodd"
                      d="M13.5859 26.9688C14.1466 26.9688 14.6016 27.4238 14.6016 27.9844C14.6016 28.545 14.1466 29 13.5859 29C13.0253 29 12.5703 28.545 12.5703 27.9844C12.5703 27.4238 13.0253 26.9688 13.5859 26.9688Z"
                      fill-rule="evenodd"/>
                <path :fill="formData.colorNormal" clip-rule="evenodd"
                      d="M18.6641 26.9688C19.2247 26.9688 19.6797 27.4238 19.6797 27.9844C19.6797 28.545 19.2247 29 18.6641 29C18.1034 29 17.6484 28.545 17.6484 27.9844C17.6484 27.4238 18.1034 26.9688 18.6641 26.9688Z"
                      fill-rule="evenodd"/>
                <path :fill="formData.colorNormal" clip-rule="evenodd"
                      d="M9.01562 13.1993C9.57625 13.1993 10.0312 13.6535 10.0312 14.2149C10.0312 14.7755 9.57625 15.2305 9.01562 15.2305C8.455 15.2305 8 14.7755 8 14.2149C8 13.6535 8.455 13.1993 9.01562 13.1993Z"
                      fill-rule="evenodd"/>
                <path :fill="formData.colorNormal" clip-rule="evenodd"
                      d="M23.2344 13.1993C23.795 13.1993 24.25 13.6535 24.25 14.2149C24.25 14.7755 23.795 15.2305 23.2344 15.2305C22.6738 15.2305 22.2188 14.7755 22.2188 14.2149C22.2188 13.6535 22.6738 13.1993 23.2344 13.1993Z"
                      fill-rule="evenodd"/>
              </svg>


            </div>

          </div>

          <div class="jmain_top_c">
            <div class="jmain_top_cb"
                 v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal : '#ffffff'}">
              <div class="jmain_top_cb1" :style="{'font-family': formData.fontfamily}">上午10:00</br><span>2017/06/27</span></div>
              <div class="jmain_top_cb2">
                <svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg">
                  <path :fill="formData.colorNormal" clip-rule="evenodd"
                        d="M15.9987 7.53644C20.6728 7.53644 24.4623 11.3259 24.4623 16C24.4623 20.6741 20.6728 24.4636 15.9987 24.4636C11.3247 24.4636 7.53516 20.6741 7.53516 16C7.53516 11.3259 11.3247 7.53644 15.9987 7.53644Z"
                        fill-rule="evenodd"/>
                  <path :fill="formData.colorNormal" clip-rule="evenodd"
                        d="M25.1887 6.80723C25.4097 7.02764 25.4097 7.38573 25.1887 7.60614L23.5903 9.20514C23.3693 9.42555 23.0112 9.42555 22.7908 9.20514C22.5697 8.98414 22.5697 8.62664 22.7908 8.40564L24.3892 6.80723C24.6102 6.58623 24.9677 6.58623 25.1887 6.80723Z"
                        fill-rule="evenodd"/>
                  <path :fill="formData.colorNormal" clip-rule="evenodd"
                        d="M28.9973 15.9982C28.9973 16.3102 28.7438 16.5631 28.4318 16.5631H26.171C25.859 16.5631 25.6055 16.3102 25.6055 15.9982C25.6055 15.6856 25.859 15.4327 26.171 15.4327H28.4318C28.7438 15.4327 28.9973 15.6856 28.9973 15.9982Z"
                        fill-rule="evenodd"/>
                  <path :fill="formData.colorNormal" clip-rule="evenodd"
                        d="M25.1887 25.1892C24.9677 25.4096 24.6102 25.4096 24.3892 25.1892L22.7908 23.5902C22.5697 23.3698 22.5697 23.0117 22.7908 22.7913C23.0112 22.5703 23.3693 22.5703 23.5903 22.7913L25.1887 24.3897C25.4097 24.6107 25.4097 24.9682 25.1887 25.1892Z"
                        fill-rule="evenodd"/>
                  <path :fill="formData.colorNormal" clip-rule="evenodd"
                        d="M15.9991 28.9958C15.6871 28.9958 15.4336 28.7429 15.4336 28.4309V26.1701C15.4336 25.8581 15.6871 25.6046 15.9991 25.6046C16.3111 25.6046 16.564 25.8581 16.564 26.1701V28.4309C16.564 28.7429 16.3111 28.9958 15.9991 28.9958Z"
                        fill-rule="evenodd"/>
                  <path :fill="formData.colorNormal" clip-rule="evenodd"
                        d="M6.80833 25.1892C6.58733 24.9682 6.58733 24.6107 6.80833 24.3897L8.40674 22.7913C8.62774 22.5703 8.98524 22.5703 9.20624 22.7913C9.42724 23.0117 9.42724 23.3698 9.20624 23.5902L7.60783 25.1892C7.38683 25.4096 7.02874 25.4096 6.80833 25.1892Z"
                        fill-rule="evenodd"/>
                  <path :fill="formData.colorNormal" clip-rule="evenodd"
                        d="M3 15.9982C3 15.6856 3.25291 15.4327 3.5655 15.4327H5.82632C6.13832 15.4327 6.39123 15.6856 6.39123 15.9982C6.39123 16.3102 6.13832 16.5631 5.82632 16.5631H3.5655C3.25291 16.5631 3 16.3102 3 15.9982Z"
                        fill-rule="evenodd"/>
                  <path :fill="formData.colorNormal" clip-rule="evenodd"
                        d="M6.80833 6.80723C7.02874 6.58623 7.38683 6.58623 7.60783 6.80723L9.20624 8.40564C9.42724 8.62664 9.42724 8.98414 9.20624 9.20514C8.98524 9.42555 8.62774 9.42555 8.40674 9.20514L6.80833 7.60614C6.58733 7.38573 6.58733 7.02764 6.80833 6.80723Z"
                        fill-rule="evenodd"/>
                  <path :fill="formData.colorNormal" clip-rule="evenodd"
                        d="M15.9991 3C16.3111 3 16.564 3.25291 16.564 3.56491V5.82632C16.564 6.13832 16.3111 6.39123 15.9991 6.39123C15.6871 6.39123 15.4336 6.13832 15.4336 5.82632V3.56491C15.4336 3.25291 15.6871 3 15.9991 3Z"
                        fill-rule="evenodd"/>
                </svg>
                <span :style="{'font-family': formData.fontfamily}">24℃</span></div>
            </div>
          </div>


          <div class="jmain_top_r">

            <svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg">
              <path :fill="formData.colorNormal" clip-rule="evenodd"
                    d="M7.82143 15.55C7.82143 13.8103 9.33246 12.4 11.1964 12.4C13.0604 12.4 14.5714 13.8103 14.5714 15.55C14.5714 17.2897 13.0604 18.7 11.1964 18.7C9.33246 18.7 7.82143 17.2897 7.82143 15.55ZM26.1429 25H6.85714C4.72704 25 3 23.3881 3 21.4V11.5C3 9.5119 4.72704 7.9 6.85714 7.9H19.3929V9.7H8.23414C6.40875 9.7 4.92857 10.9726 4.92857 12.5422V20.3578C4.92857 21.9274 6.40875 23.2 8.23414 23.2H24.7649C26.5912 23.2 28.0714 21.9274 28.0714 20.3578V17.8H30V21.4C30 23.3881 28.273 25 26.1429 25ZM27.1071 7H29.0357V16H27.1071V7ZM22.2857 7H24.2143V16H22.2857V7Z"
                    fill-rule="evenodd"/>
            </svg>
            <svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg">
              <path :fill="formData.colorNormal" clip-rule="evenodd"
                    d="M27.0806 13.1833C20.5652 6.59305 11.1401 6.84004 4.92018 13.1833L3 11.3813C10.6476 4.20546 21.3563 4.207 29 11.3813L27.0806 13.1833ZM16.3924 11.3913C19.8782 11.3913 22.5957 12.9248 25.0596 15.2385L23.4837 16.7774C21.532 14.9461 19.1525 13.6996 16.3924 13.6996C13.6331 13.6996 10.646 14.9361 8.69356 16.7682L6.93727 15.2385C9.40111 12.9248 12.9066 11.3913 16.3924 11.3913ZM22.0576 18.8134L20.332 20.6247C18.5072 19.0865 17.4963 19.0858 15.9984 19.0858C14.9631 19.0858 13.6378 19.3682 11.6648 20.6247L9.94242 18.8134C13.0618 16.9513 13.9317 16.7774 15.9984 16.7774C18.155 16.7774 18.7601 16.8144 22.0576 18.8134ZM18.7562 22.933L15.9291 26L13.2407 22.933C14.3619 21.2487 16.68 20.6277 18.7562 22.933Z"
                    fill-rule="evenodd"/>
            </svg>
            <svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg">
              <path :fill="formData.colorNormal"
                    d="M15.549 28.0418V18.0686L10.5723 22.7509C10.1497 23.1255 9.49244 23.0786 9.16379 22.6104C8.88209 22.2358 8.97599 21.674 9.35159 21.393L15.1264 15.9148L9.35159 10.4834C9.02294 10.1556 8.92904 9.64057 9.16379 9.26599C9.49244 8.75094 10.1967 8.70412 10.5723 9.0787L15.549 13.7141V3.92822C15.549 3.13224 16.488 2.71084 17.0983 3.22589L23.6244 9.03188C24.0469 9.40646 24.0469 10.0152 23.6244 10.3897L17.8965 15.9148L23.7183 21.3462C24.0939 21.7208 24.0939 22.3295 23.7183 22.7041L17.1453 28.7442C16.5349 29.306 15.549 28.8846 15.549 28.0418ZM17.427 18.0686V25.888L21.6525 22.0017L17.427 18.0686ZM17.427 6.03524V13.7141L21.6525 9.78104L17.427 6.03524Z"/>
            </svg>
            <svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg">
              <path :fill="formData.colorNormal" clip-rule="evenodd"
                    d="M28.6 28C27.8274 28 27.2003 27.3798 27.2003 26.6155V7.23315C27.2003 6.46893 27.8274 5.84869 28.6 5.84869C29.3727 5.84869 29.9998 6.46893 29.9998 7.23315V26.6155C29.9998 27.3798 29.3727 28 28.6 28ZM23.0011 28C22.2285 28 21.6014 27.3798 21.6014 26.6155V10.925C21.6014 10.1608 22.2285 9.54058 23.0011 9.54058C23.7738 9.54058 24.4009 10.1608 24.4009 10.925V26.6155C24.4009 27.3798 23.7738 28 23.0011 28ZM17.4022 28C16.6296 28 16.0025 27.3798 16.0025 26.6155V15.5399C16.0025 14.7757 16.6296 14.1554 17.4022 14.1554C18.1749 14.1554 18.802 14.7757 18.802 15.5399V26.6155C18.802 27.3798 18.1749 28 17.4022 28ZM11.8033 28C11.0307 28 10.4036 27.3798 10.4036 26.6155V20.1547C10.4036 19.3905 11.0307 18.7703 11.8033 18.7703C12.576 18.7703 13.203 19.3905 13.203 20.1547V26.6155C13.203 27.3798 12.576 28 11.8033 28ZM6.20441 28C5.43177 28 4.80469 27.3798 4.80469 26.6155V23.8466C4.80469 23.0824 5.43177 22.4622 6.20441 22.4622C6.97706 22.4622 7.60414 23.0824 7.60414 23.8466V26.6155C7.60414 27.3798 6.97706 28 6.20441 28Z"
                    fill-rule="evenodd"/>
              <path :fill="formData.colorNormal" clip-rule="evenodd"
                    d="M10.4077 16.9271H2.93408C2.41898 16.9271 2 16.5653 2 16.1186V4.8076C2 4.3618 2.41898 4 2.93408 4H10.4077C10.9237 4 11.3418 4.3618 11.3418 4.8076V16.1186C11.3418 16.5653 10.9237 16.9271 10.4077 16.9271ZM6.67135 16.5478C7.04088 16.5478 7.34136 16.2903 7.34136 15.9737C7.34136 15.6571 7.04088 15.3996 6.67135 15.3996C6.30089 15.3996 6.00135 15.6571 6.00135 15.9737C6.00135 16.2903 6.30089 16.5478 6.67135 16.5478ZM8.87266 4.75591H4.47005C4.33474 4.75591 4.22557 4.8436 4.22557 4.95251C4.22557 5.06142 4.33474 5.15002 4.47005 5.15002H8.87266C9.00703 5.15002 9.11714 5.06142 9.11714 4.95251C9.11714 4.8436 9.00703 4.75591 8.87266 4.75591ZM10.4543 5.90593H2.88836V15.0221H10.4543V5.90593Z"
                    fill-rule="evenodd"/>
            </svg>
            <svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg">
              <path clip-rule="evenodd"
                    d="M4.66667 8H24.8933C26.3656 8 27.5589 9.17889 27.5589 10.6322V20.9244C27.5589 22.3778 26.3656 23.5567 24.8933 23.5567H4.66667C3.19333 23.5567 2 22.3778 2 20.9244V10.6322C2 9.17889 3.19333 8 4.66667 8Z"
                    fill-rule="evenodd" stroke="black" stroke-opacity="0.87"/>
              <path :fill="formData.colorNormal" clip-rule="evenodd" d="M4.2207 10.2222H7.55404V21.3333H4.2207V10.2222Z"
                    fill-rule="evenodd"/>
              <path :fill="formData.colorNormal" clip-rule="evenodd"
                    d="M8.66602 10.2222H11.9993V21.3333H8.66602V10.2222Z" fill-rule="evenodd"/>
              <path :fill="formData.colorNormal" clip-rule="evenodd"
                    d="M13.1094 10.2222H16.4427V21.3333H13.1094V10.2222Z" fill-rule="evenodd"/>
              <path :fill="formData.colorNormal" clip-rule="evenodd"
                    d="M17.5547 10.2222H20.888V21.3333H17.5547V10.2222Z" fill-rule="evenodd"/>
              <path :fill="formData.colorNormal" clip-rule="evenodd"
                    d="M28.6543 12.43C30.0932 12.43 30.8876 13.9289 30.8876 15.7778C30.8876 17.6289 30.0932 19.1278 28.6543 19.1278V12.43Z"
                    fill-rule="evenodd"/>
            </svg>
            <svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg">
              <path clip-rule="evenodd"
                    d="M30.0349 25.192C29.4505 25.192 28.9762 24.7177 28.9762 24.1333V9.31162C28.9762 8.72722 29.4505 8.25293 30.0349 8.25293C30.6193 8.25293 31.0936 8.72722 31.0936 9.31162V24.1333C31.0936 24.7177 30.6193 25.192 30.0349 25.192ZM25.8001 25.192C25.2157 25.192 24.7414 24.7177 24.7414 24.1333V12.1348C24.7414 11.5504 25.2157 11.0761 25.8001 11.0761C26.3845 11.0761 26.8588 11.5504 26.8588 12.1348V24.1333C26.8588 24.7177 26.3845 25.192 25.8001 25.192ZM21.5654 25.192C20.981 25.192 20.5067 24.7177 20.5067 24.1333V15.6638C20.5067 15.0794 20.981 14.6051 21.5654 14.6051C22.1498 14.6051 22.624 15.0794 22.624 15.6638V24.1333C22.624 24.7177 22.1498 25.192 21.5654 25.192ZM17.3306 25.192C16.7455 25.192 16.2719 24.7177 16.2719 24.1333V19.1928C16.2719 18.6084 16.7455 18.1341 17.3306 18.1341C17.915 18.1341 18.3893 18.6084 18.3893 19.1928V24.1333C18.3893 24.7177 17.915 25.192 17.3306 25.192ZM13.0958 25.192C12.5107 25.192 12.0371 24.7177 12.0371 24.1333V22.016C12.0371 21.4316 12.5107 20.9573 13.0958 20.9573C13.6802 20.9573 14.1545 21.4316 14.1545 22.016V24.1333C14.1545 24.7177 13.6802 25.192 13.0958 25.192Z"
                    fill="black" fill-opacity="0.6" fill-rule="evenodd"/>
              <path :fill="formData.colorNormal" clip-rule="evenodd"
                    d="M25.8001 25.192C25.2157 25.192 24.7414 24.7177 24.7414 24.1333V12.1348C24.7414 11.5504 25.2157 11.0761 25.8001 11.0761C26.3845 11.0761 26.8588 11.5504 26.8588 12.1348V24.1333C26.8588 24.7177 26.3845 25.192 25.8001 25.192ZM21.5654 25.192C20.981 25.192 20.5067 24.7177 20.5067 24.1333V15.6638C20.5067 15.0794 20.981 14.6051 21.5654 14.6051C22.1498 14.6051 22.624 15.0794 22.624 15.6638V24.1333C22.624 24.7177 22.1498 25.192 21.5654 25.192ZM17.3306 25.192C16.7455 25.192 16.2719 24.7177 16.2719 24.1333V19.1928C16.2719 18.6084 16.7455 18.1341 17.3306 18.1341C17.915 18.1341 18.3893 18.6084 18.3893 19.1928V24.1333C18.3893 24.7177 17.915 25.192 17.3306 25.192ZM13.0958 25.192C12.5107 25.192 12.0371 24.7177 12.0371 24.1333V22.0159C12.0371 21.4316 12.5107 20.9573 13.0958 20.9573C13.6802 20.9573 14.1545 21.4316 14.1545 22.0159V24.1333C14.1545 24.7177 13.6802 25.192 13.0958 25.192Z"
                    fill-rule="evenodd"/>
              <path :fill="formData.colorNormal"
                    d="M5.09624 17.8921H6.07084V18.6207H5.09624V20.2514H4.19883V18.6207H1V18.0948L4.14575 13.2266H5.09624V17.8921ZM2.0132 17.8921H4.19883V14.4472L4.09268 14.6402L2.0132 17.8921Z"/>
              <path :fill="formData.colorNormal"
                    d="M12.2948 19.3299C12.0568 19.6709 11.7239 19.9266 11.2961 20.097C10.8715 20.2643 10.3762 20.3479 9.81004 20.3479C9.2375 20.3479 8.72929 20.2144 8.28541 19.9475C7.84153 19.6773 7.49737 19.2945 7.25291 18.7992C7.01167 18.3038 6.88784 17.7297 6.8814 17.0767V16.464C6.8814 15.4058 7.12747 14.5855 7.61959 14.0034C8.11494 13.4212 8.80971 13.1301 9.7039 13.1301C10.4373 13.1301 11.0275 13.3182 11.4746 13.6946C11.9217 14.0677 12.1951 14.5984 12.2948 15.2867H11.3684C11.1948 14.3572 10.6415 13.8924 9.70872 13.8924C9.08794 13.8924 8.61672 14.1111 8.29506 14.5486C7.97663 14.9828 7.8158 15.6132 7.81259 16.4399V17.014C7.81259 17.8021 7.99271 18.4293 8.35296 18.8957C8.71321 19.3589 9.20051 19.5904 9.81487 19.5904C10.1623 19.5904 10.4662 19.5518 10.7268 19.4746C10.9873 19.3975 11.2028 19.2672 11.3733 19.0838V17.5061H9.74732V16.7535H12.2948V19.3299Z"/>
              <path :fill="formData.colorNormal" clip-rule="evenodd"
                    d="M15.7348 13.8993H14.1919C13.6971 12.9048 12.9539 12.0558 12.0371 11.4417V9.81274C13.7183 10.6738 15.041 12.1263 15.7348 13.8993Z"
                    fill-rule="evenodd"/>
              <path :fill="formData.colorNormal" clip-rule="evenodd"
                    d="M19.4303 13.8993H17.975C17.0977 10.954 14.8836 8.59239 12.0371 7.50193V6C15.6642 7.1935 18.4697 10.1727 19.4303 13.8993Z"
                    fill-rule="evenodd"/>
            </svg>


          </div>
        </div>


<!-- 首页 -->
        <div class="jindex" v-if="jindex">

        <div class="jindex01" v-if="jindex01">
          <div class="jindex_box" :style="{}">

            <div class="jindex_box2 dotbox"
                 :style="{'border-radius':formData.largeCornerSize+'px', backgroundImage: iconsFlag.index_tab_bg ? getBgImgUrl_(iconsFlag.index_tab_bg) : getBgImgUrl('icon/png_index/index_tab_bg.png')}"
                 v-on:click="handleImgSelect('icon/png_index', 'index_tab_bg');" ></div>
            <div class="jindex_boxt" v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal : '#ffffff'}">高德地图</div>
            <div class="jindex01_dh">
              <div class="jindex01_dhs">
                <img :src="iconsFlag.arrow0" class="dotbox" height="32" v-if="iconsFlag.arrow0"
                     v-on:click="handleImgSelect('icon/png_index', 'arrow0');" width="32"/>
                <svg class="dotbox" fill="none"
                     height="84" v-if='!iconsFlag.arrow0' v-on:click="handleImgSelect('icon/png_index', 'arrow0');"
                     viewBox="0 0 83 84" width="83" xmlns="http://www.w3.org/2000/svg">
                  <path d="M19.5873 29.9644L39.6218 5.25L59.6562 29.9644H45.0224V78.75H34.2212V29.9644H19.5873Z"
                        :fill="formData.colorSelected"/>
                </svg>

              </div>
              <div class="jindex01_dhs">
                <img :src="iconsFlag.arrow15" class="dotbox" height="32" v-if="iconsFlag.arrow15"
                     v-on:click="handleImgSelect('icon/png_index', 'arrow15');" width="32"/>
                <svg class="dotbox" fill="none"
                     height="84" v-if='!iconsFlag.arrow15' v-on:click="handleImgSelect('icon/png_index', 'arrow15');"
                     viewBox="0 0 84 84" width="84" xmlns="http://www.w3.org/2000/svg">
                  <path d="M21.0013 29.9644L41.4696 5.25L61.938 29.9644H46.9872V78.75H35.9521V29.9644H21.0013Z"
                        :fill="formData.colorNormal" fill-opacity="0.12"/>
                </svg>


              </div>
              <div class="jindex01_dhs">
                <img :src="iconsFlag.arrow3" class="dotbox" height="32" v-if="iconsFlag.arrow3"
                     v-on:click="handleImgSelect('icon/png_index', 'arrow3');" width="32"/>
                <svg class="dotbox" fill="none"
                     height="84" v-if='!iconsFlag.arrow3' v-on:click="handleImgSelect('icon/png_index', 'arrow3');"
                     viewBox="0 0 84 84" width="84" xmlns="http://www.w3.org/2000/svg">
                  <path d="M68.25 26.647L44.6268 5.25V19.1978H15.75V78.75H26.2512V30.3187H44.6268V45.2088L68.25 26.647Z"
                        :fill="formData.colorNormal" fill-opacity="0.12"/>
                </svg>


              </div>
            </div>


            <div class="jindex_boxq"><span v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal : '#ffffff'}">前方路口请直行</span><em  v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal : '#BEC3CA'}"></em></div>


            <div class="jindex_boxf jindex_boxf0">
              <div class="jindex_boxfs">
                <img :src="iconsFlag.ic_auto_dest" class="dotbox" height="32" v-if="iconsFlag.ic_auto_dest"
                     v-on:click="handleImgSelect('icon/png_index', 'ic_auto_dest');" width="32"/>
                <svg class="dotbox" fill="none"
                     height="30" v-if='!iconsFlag.ic_auto_dest'
                     v-on:click="handleImgSelect('icon/png_index', 'ic_auto_dest');" viewBox="0 0 30 30" width="30"
                     xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd"
                        d="M26.6832 25.138C27.3206 25.7926 27.3206 26.8545 26.6832 27.5091C26.0458 28.1636 25.0117 28.1636 24.3743 27.5091L19.7573 22.7678C19.6079 22.6136 19.4994 22.4343 19.4202 22.2457C17.5773 23.8331 15.2031 24.7911 12.6101 24.7911C6.75007 24.7911 2 19.9132 2 13.8955C2 7.87784 6.75007 3 12.6101 3C18.4702 3 23.2202 7.87784 23.2202 13.8955C23.2202 16.1593 22.5469 18.2613 21.3969 20.0029C21.6402 20.0808 21.8728 20.199 22.0662 20.3968L26.6832 25.138ZM12.6101 5.51435C8.10245 5.51435 4.44849 9.26661 4.44849 13.8955C4.44849 18.5245 8.10245 22.2767 12.6101 22.2767C17.1178 22.2767 20.7718 18.5245 20.7718 13.8955C20.7718 9.26661 17.1178 5.51435 12.6101 5.51435Z"
                        :fill="formData.colorSelected"/>
                </svg>
              </div>
              <div class="jindex_boxft2" v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected : '#BEC3CA'}">Home</div>
              <div class="jindex_boxft2" v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected : '#BEC3CA'}">Company</div>

            </div>
          </div>

          <div class="jindex_box">
            <div class="jindex_box2 dotbox"
                 :style="{'border-radius':formData.largeCornerSize+'px', backgroundImage: iconsFlag.index_tab_bg ? getBgImgUrl_(iconsFlag.index_tab_bg) : getBgImgUrl('icon/png_index/index_tab_bg.png')}"
                 v-on:click="handleImgSelect('icon/png_index', 'index_tab_bg');" ></div>
            <div class="jindex_boxt" v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal : '#ffffff'}">音乐</div>
            <div class="jindex_boxs2">
              <img v-if="iconsFlag.defaultablumpic" :src="iconsFlag.defaultablumpic" class="dotbox"
                   v-on:click="handleImgSelect('icon/png_music', 'defaultablumpic');"/>
              <img v-if="!iconsFlag.defaultablumpic" :src="getImgUrl('icon/png_music/defaultablumpic.png')" class="dotbox"
                   v-on:click="handleImgSelect('icon/png_music', 'defaultablumpic');"/>
            </div>

              <div class="jindex_boxq"><span v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal : '#ffffff'}">Here We Are</span><em  v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal : '#BEC3CA'}">华晨宇</em></div>

              <div class="jindex_boxf jindex_boxf2">

                <div class="jmusci_kl_ba">
                  <img :src="iconsFlag.prev" class="dotbox" height="32" v-if="iconsFlag.prev"
                       v-on:click="handleImgSelect('icon/png_index', 'prev');" width="32"/>
                  <svg class="dotbox" fill="none"
                       height="48" v-if='!iconsFlag.prev' v-on:click="handleImgSelect('icon/png_index', 'prev');"
                       viewBox="0 0 48 48" width="48" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd"
                          d="M18.4027 23.7509L37.1625 10.1699C37.9804 9.57672 39.1268 10.1592 39.1268 11.1677V38.3298C39.1268 39.3383 37.9804 39.9208 37.1625 39.329L18.4027 25.7466C17.722 25.2543 17.722 24.2432 18.4027 23.7509Z"
                          :fill="formData.colorSelected"/>
                    <path fill-rule="evenodd" clip-rule="evenodd"
                          d="M10.1383 7.5C11.596 7.5 12.7767 8.6876 12.7767 10.1538V39.3462C12.7767 40.8124 11.596 42 10.1383 42C8.68065 42 7.5 40.8124 7.5 39.3462V10.1538C7.5 8.6876 8.68065 7.5 10.1383 7.5Z"
                          :fill="formData.colorSelected"/>
                  </svg>

                </div>

                <div class="jmusci_kl_ba">
                  <img :src="iconsFlag.pause_icon" class="dotbox" height="32" v-if="iconsFlag.pause_icon"
                       v-on:click="handleImgSelect('icon/png_index', 'pause_icon');" width="32"/>
                  <svg class="dotbox" fill="none"
                       height="48" v-if='!iconsFlag.pause_icon'
                       v-on:click="handleImgSelect('icon/png_index', 'pause_icon');" viewBox="0 0 49 48" width="49"
                       xmlns="http://www.w3.org/2000/svg">
                    <g clip-path="url(#clip0)">
                      <path fill-rule="evenodd" clip-rule="evenodd"
                            d="M33.6739 7.5C35.1622 7.5 36.3677 8.6876 36.3677 10.1538V39.3462C36.3677 40.8124 35.1622 42 33.6739 42C32.1855 42 30.98 40.8124 30.98 39.3462V10.1538C30.98 8.6876 32.1855 7.5 33.6739 7.5Z"
                            :fill="formData.colorSelected"/>
                      <path fill-rule="evenodd" clip-rule="evenodd"
                            d="M14.8163 7.5C16.3047 7.5 17.5102 8.6876 17.5102 10.1538V39.3462C17.5102 40.8124 16.3047 42 14.8163 42C13.3279 42 12.1224 40.8124 12.1224 39.3462V10.1538C12.1224 8.6876 13.3279 7.5 14.8163 7.5Z"
                            :fill="formData.colorSelected"/>
                    </g>
                    <defs>
                      <clipPath id="clip0">
                        <rect x="12.1224" y="7.5" width="24.2449" height="34.5" :fill="formData.colorSelected"/>
                      </clipPath>
                    </defs>
                  </svg>

                             </div>

                <div class="jmusci_kl_ba">
                  <img :src="iconsFlag.next" class="dotbox" height="32" v-if="iconsFlag.next"
                       v-on:click="handleImgSelect('icon/png_index', 'next');" width="32"/>
                  <svg class="dotbox" fill="none"
                       height="48" v-if='!iconsFlag.next' v-on:click="handleImgSelect('icon/png_index', 'next');"
                       viewBox="0 0 48 48" width="48" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd"
                          d="M28.225 24.2491L9.46513 37.8301C8.64725 38.4233 7.5009 37.8408 7.5009 36.8323L7.5009 9.67021C7.5009 8.66175 8.64725 8.07923 9.46513 8.67103L28.225 22.2534C28.9056 22.7457 28.9056 23.7568 28.225 24.2491Z"
                          :fill="formData.colorSelected"/>
                    <path fill-rule="evenodd" clip-rule="evenodd"
                          d="M36.4896 40.5C35.0319 40.5 33.8513 39.3124 33.8513 37.8462L33.8513 8.65384C33.8513 7.18759 35.0319 6 36.4896 6C37.9473 6 39.1279 7.1876 39.1279 8.65384L39.1279 37.8462C39.1279 39.3124 37.9473 40.5 36.4896 40.5Z"
                          :fill="formData.colorSelected"/>
                  </svg>


                </div>

              </div>

          </div>

          <div class="jindex_box"  >
            <div class="jindex_box2 dotbox"
                 :style="{'border-radius':formData.largeCornerSize+'px', backgroundImage: iconsFlag.index_tab_bg ? getBgImgUrl_(iconsFlag.index_tab_bg) : getBgImgUrl('icon/png_index/index_tab_bg.png')}"
                 v-on:click="handleImgSelect('icon/png_index', 'index_tab_bg');" ></div>
            <div class="jindex_boxt" v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal : '#ffffff'}">电话</div>

            <div class="jindex_boxs">
              <img :src="iconsFlag.bt_phone_center_icon" class="dotbox" height="32"
                   v-if="iconsFlag.bt_phone_center_icon"
                   v-on:click="handleImgSelect('icon/png_index', 'bt_phone_center_icon');" width="32"/>
              <svg class="dotbox" fill="none"
                   height="120" v-if='!iconsFlag.bt_phone_center_icon'
                   v-on:click="handleImgSelect('icon/png_index', 'bt_phone_center_icon');" viewBox="0 0 120 120"
                   width="120" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M71.8946 80.6855C72.0844 80.5661 74.1673 79.2458 74.7766 78.8742C75.9031 78.1841 76.8333 77.6666 77.7634 77.2419C84.3004 74.2296 90.0645 76.3595 97.6888 85.3832C102.405 90.9698 103.8 95.9262 101.979 100.338C100.623 103.636 98.0097 105.912 93.3591 108.725C93.0579 108.904 90.3788 110.483 89.6912 110.915C78.8637 117.682 54.0456 102.19 36.1965 75.7159C18.3017 49.1758 13.6707 20.8773 24.6422 14.0101L26.0897 13.0812L27.6617 12.0461C33.2097 8.41006 36.7598 6.95705 40.9715 7.6802C45.1767 8.41006 48.753 11.5617 51.7792 17.301C58.159 29.443 56.7507 35.2023 48.5434 40.4373C47.954 40.8222 45.8579 42.1028 45.6614 42.2288C43.6505 43.4895 47.0566 51.936 54.9757 63.6799C62.993 75.5566 69.6937 82.0524 71.888 80.6855H71.8946Z"
                  :fill="formData.colorSelected"/>
              </svg>
            </div>

            <div class="jindex_boxq"><span v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal : '#ffffff'}">通话中</span><em  v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal : '#BEC3CA'}">0:05</em></div>

            <div class="jindex_boxf">
              <div class="jindex_boxfs">
                <img :src='iconsFlag["bt_phone_search_ico"]' class="dotbox" height="32"
                     v-if='iconsFlag["bt_phone_search_ico"]'
                     v-on:click="handleImgSelect('icon/png_index', 'bt_phone_search_ico');" width="32"/>
                <svg class="dotbox" fill="none"
                     height="30" v-if='!iconsFlag["bt_phone_search_ico"]'
                     v-on:click="handleImgSelect('icon/png_index', 'bt_phone_search_ico');" viewBox="0 0 30 30"
                     width="30" xmlns="http://www.w3.org/2000/svg">
                  <path :fill="formData.colorSelected" clip-rule="evenodd"
                        d="M26.6832 25.138C27.3206 25.7926 27.3206 26.8545 26.6832 27.5091C26.0458 28.1636 25.0117 28.1636 24.3743 27.5091L19.7573 22.7678C19.6079 22.6136 19.4994 22.4343 19.4202 22.2457C17.5773 23.8331 15.2031 24.7911 12.6101 24.7911C6.75007 24.7911 2 19.9132 2 13.8955C2 7.87784 6.75007 3 12.6101 3C18.4702 3 23.2202 7.87784 23.2202 13.8955C23.2202 16.1593 22.5469 18.2613 21.3969 20.0029C21.6402 20.0808 21.8728 20.199 22.0662 20.3968L26.6832 25.138ZM12.6101 5.51435C8.10245 5.51435 4.44849 9.26661 4.44849 13.8955C4.44849 18.5245 8.10245 22.2767 12.6101 22.2767C17.1178 22.2767 20.7718 18.5245 20.7718 13.8955C20.7718 9.26661 17.1178 5.51435 12.6101 5.51435Z"
                        fill-rule="evenodd"/>
                </svg>
              </div>
              <div class="jindex_boxft" v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal : '#BEC3CA'}">搜索联系人</div>

            </div>


          </div>

        </div>

        <div class="jindex02" v-if="jindex02">

          <div class="jindex_box">
            <div class="jindex_box2 dotbox"
                 :style="{'border-radius':formData.largeCornerSize+'px', backgroundImage: iconsFlag.index_tab_bg ? getBgImgUrl_(iconsFlag.index_tab_bg) : getBgImgUrl('icon/png_index/index_tab_bg.png')}"
                 v-on:click="handleImgSelect('icon/png_index', 'index_tab_bg');" ></div>
            <div class="jindex_boxt" v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal : '#ffffff'}">电台</div>
            <div class="jindex_boxs">
              <img :src='iconsFlag["Component 15"]' class="dotbox" height="32" v-if='iconsFlag["Component 15"]'
                   v-on:click="handleImgSelect('icon/png_index', 'Component 15');" width="32"/>
              <svg class="dotbox" fill="none"
                   height="120" v-if='!iconsFlag["Component 15"]'
                   v-on:click="handleImgSelect('icon/png_index', 'Component 15');" viewBox="0 0 120 120" width="120"
                   xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M104.601 83.9958C109.213 76.4125 111.737 67.7448 111.919 58.8713C112.101 49.9978 109.934 41.2339 105.637 33.4681C101.34 25.7022 95.0659 19.2105 87.4513 14.6509C79.8366 10.0913 71.1519 7.62591 62.2773 7.5047C53.4028 7.38348 44.6539 9.61073 36.9176 13.9607C29.1813 18.3106 22.7326 24.6286 18.2251 32.2742C13.7177 39.9198 11.3117 48.6212 11.2512 57.4964C11.1906 66.3715 13.4776 75.1049 17.8803 82.8113C18.3232 83.5841 19.055 84.1493 19.9147 84.3825C20.7743 84.6158 21.6914 84.498 22.4642 84.055C23.237 83.6121 23.8022 82.8803 24.0354 82.0207C24.2686 81.161 24.1508 80.2439 23.7079 79.4711C19.8928 72.792 17.9113 65.223 17.9642 57.5312C18.0171 49.8395 20.1025 42.2984 24.0091 35.6724C27.9157 29.0464 33.5047 23.5709 40.2094 19.801C46.9142 16.0311 54.4964 14.1007 62.1876 14.2055C69.8788 14.3104 77.4056 16.4467 84.0051 20.3979C90.6046 24.3492 96.0422 29.975 99.7668 36.705C103.491 43.4351 105.37 51.0302 105.214 58.7205C105.057 66.4108 102.87 73.923 98.8742 80.4957C98.459 81.253 98.3516 82.1411 98.5743 82.9756C98.7969 83.81 99.3325 84.5266 100.07 84.9764C100.807 85.4262 101.689 85.5747 102.533 85.3909C103.377 85.2072 104.118 84.7055 104.601 83.9899V83.9958ZM87.3967 72.0505C90.1634 67.5005 91.6779 62.2999 91.7869 56.9759C91.8959 51.6519 90.5953 46.3937 88.0171 41.7343C85.4389 37.0749 81.6746 33.18 77.1059 30.4444C72.5372 27.7087 67.3264 26.2295 62.0018 26.1568C56.6772 26.0841 51.428 27.4204 46.7863 30.0302C42.1445 32.6401 38.2753 36.4308 35.5708 41.018C32.8663 45.6052 31.4226 50.8259 31.3861 56.1509C31.3496 61.4759 32.7216 66.7159 35.363 71.3398C35.806 72.1126 36.5378 72.6777 37.3974 72.911C38.2571 73.1442 39.1741 73.0264 39.9469 72.5835C40.7197 72.1405 41.2849 71.4088 41.5181 70.5491C41.7514 69.6895 41.6336 68.7724 41.1906 67.9996C39.1368 64.403 38.0703 60.3274 38.0991 56.1858C38.128 52.0442 39.2511 47.9839 41.3548 44.4162C43.4585 40.8485 46.4679 37.9004 50.078 35.8706C53.6882 33.8407 57.7708 32.8013 61.9121 32.8576C66.0534 32.914 70.1062 34.0641 73.6598 36.1914C77.2134 38.3187 80.1415 41.3477 82.1473 44.9712C84.1531 48.5948 85.1654 52.6842 85.0815 56.8251C84.9977 60.9659 83.8207 65.011 81.6698 68.5504C81.4155 68.9266 81.2402 69.3505 81.1545 69.7964C81.0688 70.2424 81.0744 70.701 81.171 71.1447C81.2676 71.5884 81.4532 72.0079 81.7165 72.3779C81.9798 72.7478 82.3155 73.0604 82.7031 73.297C83.0908 73.5335 83.5223 73.6889 83.9717 73.7539C84.4212 73.8188 84.8791 73.7919 85.3178 73.6749C85.7566 73.5578 86.167 73.353 86.5243 73.0727C86.8816 72.7925 87.1784 72.4427 87.3967 72.0445V72.0505ZM71.1991 61.9647L70.1627 97.1612C70.1548 97.3928 70.123 97.623 70.0679 97.8482C70.1271 98.3101 70.1568 98.778 70.1568 99.2517C70.1568 106.773 62.8427 112.5 54.1664 112.5C45.4962 112.5 38.188 106.773 38.188 99.2517C38.188 91.7304 45.4962 86.0094 54.1724 86.0094C57.708 86.0094 61.0186 86.957 63.7014 88.5975L64.5542 59.5662C64.5716 58.9675 64.7488 58.3844 65.0675 57.8773C65.3861 57.3701 65.8346 56.9575 66.3665 56.682C66.7545 56.3685 67.2078 56.1459 67.6931 56.0306C68.0484 55.9417 70.6542 55.0652 71.7558 54.7573C73.1653 54.3723 74.6636 54.0525 76.387 53.7978C76.8316 53.714 77.2885 53.7208 77.7303 53.8179C78.1721 53.915 78.5898 54.1003 78.9582 54.3629C79.3266 54.6254 79.6382 54.9596 79.8742 55.3455C80.1102 55.7314 80.2659 56.161 80.3317 56.6086C80.3976 57.0561 80.3724 57.5124 80.2576 57.9499C80.1427 58.3875 79.9407 58.7973 79.6635 59.1549C79.3864 59.5124 79.0398 59.8102 78.6447 60.0305C78.2496 60.2508 77.8141 60.389 77.3642 60.4368C75.9192 60.65 74.6873 60.9106 73.5384 61.2304C73.1002 61.3488 72.123 61.6686 71.1991 61.9647Z"
                  :fill="formData.colorSelected"/>
              </svg>

            </div>

              <div class="jindex_boxq"><span v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal : '#ffffff'}">心语新话 亲子故事</span><em  v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal : '#BEC3CA'}">妈妈的故事</em></div>

              <div class="jindex_boxf jindex_boxf2">

                <div class="jmusci_kl_ba">
                  <img :src="iconsFlag.prev" class="dotbox" height="32" v-if="iconsFlag.prev"
                       v-on:click="handleImgSelect('icon/png_index', 'prev');" width="32"/>
                  <svg class="dotbox" fill="none"
                       height="48" v-if='!iconsFlag.prev' v-on:click="handleImgSelect('icon/png_index', 'prev');"
                       viewBox="0 0 48 48" width="48" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd"
                          d="M18.4027 23.7509L37.1625 10.1699C37.9804 9.57672 39.1268 10.1592 39.1268 11.1677V38.3298C39.1268 39.3383 37.9804 39.9208 37.1625 39.329L18.4027 25.7466C17.722 25.2543 17.722 24.2432 18.4027 23.7509Z"
                          :fill="formData.colorSelected"/>
                    <path fill-rule="evenodd" clip-rule="evenodd"
                          d="M10.1383 7.5C11.596 7.5 12.7767 8.6876 12.7767 10.1538V39.3462C12.7767 40.8124 11.596 42 10.1383 42C8.68065 42 7.5 40.8124 7.5 39.3462V10.1538C7.5 8.6876 8.68065 7.5 10.1383 7.5Z"
                          :fill="formData.colorSelected"/>
                  </svg>

                </div>

                <div class="jmusci_kl_ba">
                  <img :src="iconsFlag.pause_icon" class="dotbox" height="32" v-if="iconsFlag.pause_icon"
                       v-on:click="handleImgSelect('icon/png_index', 'pause_icon');" width="32"/>
                  <svg class="dotbox" fill="none"
                       height="48" v-if='!iconsFlag.pause_icon'
                       v-on:click="handleImgSelect('icon/png_index', 'pause_icon');" viewBox="0 0 49 48" width="49"
                       xmlns="http://www.w3.org/2000/svg">
                    <g clip-path="url(#clip0)">
                      <path fill-rule="evenodd" clip-rule="evenodd"
                            d="M33.6739 7.5C35.1622 7.5 36.3677 8.6876 36.3677 10.1538V39.3462C36.3677 40.8124 35.1622 42 33.6739 42C32.1855 42 30.98 40.8124 30.98 39.3462V10.1538C30.98 8.6876 32.1855 7.5 33.6739 7.5Z"
                            :fill="formData.colorSelected"/>
                      <path fill-rule="evenodd" clip-rule="evenodd"
                            d="M14.8163 7.5C16.3047 7.5 17.5102 8.6876 17.5102 10.1538V39.3462C17.5102 40.8124 16.3047 42 14.8163 42C13.3279 42 12.1224 40.8124 12.1224 39.3462V10.1538C12.1224 8.6876 13.3279 7.5 14.8163 7.5Z"
                            :fill="formData.colorSelected"/>
                    </g>
                    <defs>
                      <clipPath id="clip0">
                        <rect x="12.1224" y="7.5" width="24.2449" height="34.5" :fill="formData.colorSelected"/>
                      </clipPath>
                    </defs>
                  </svg>

                             </div>

                <div class="jmusci_kl_ba">
                  <img :src="iconsFlag.next" class="dotbox" height="32" v-if="iconsFlag.next"
                       v-on:click="handleImgSelect('icon/png_index', 'next');" width="32"/>
                  <svg class="dotbox" fill="none"
                       height="48" v-if='!iconsFlag.next' v-on:click="handleImgSelect('icon/png_index', 'next');"
                       viewBox="0 0 48 48" width="48" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd"
                          d="M28.225 24.2491L9.46513 37.8301C8.64725 38.4233 7.5009 37.8408 7.5009 36.8323L7.5009 9.67021C7.5009 8.66175 8.64725 8.07923 9.46513 8.67103L28.225 22.2534C28.9056 22.7457 28.9056 23.7568 28.225 24.2491Z"
                          :fill="formData.colorSelected"/>
                    <path fill-rule="evenodd" clip-rule="evenodd"
                          d="M36.4896 40.5C35.0319 40.5 33.8513 39.3124 33.8513 37.8462L33.8513 8.65384C33.8513 7.18759 35.0319 6 36.4896 6C37.9473 6 39.1279 7.1876 39.1279 8.65384L39.1279 37.8462C39.1279 39.3124 37.9473 40.5 36.4896 40.5Z"
                          :fill="formData.colorSelected"/>
                  </svg>


                </div>

              </div>

 </div>


          <div class="jindex_box">
            <div class="jindex_box2 dotbox"
                 :style="{'border-radius':formData.largeCornerSize+'px', backgroundImage: iconsFlag.index_tab_bg ? getBgImgUrl_(iconsFlag.index_tab_bg) : getBgImgUrl('icon/png_index/index_tab_bg.png')}"
                 v-on:click="handleImgSelect('icon/png_index', 'index_tab_bg');" ></div>
            <div class="jindex_boxt" v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal : '#ffffff'}">视频图片</div>

            <div class="jindex_boxs">
              <img :src="iconsFlag.videophoto_widget_photo_icon" class="dotbox" height="32"
                   v-if="iconsFlag.videophoto_widget_photo_icon"
                   v-on:click="handleImgSelect('icon/png_index', 'videophoto_widget_photo_icon');" width="32"/>
              <svg class="dotbox" fill="none"
                   height="120" v-if='!iconsFlag.videophoto_widget_photo_icon'
                   v-on:click="handleImgSelect('icon/png_index', 'videophoto_widget_photo_icon');" viewBox="0 0 120 120"
                   width="120" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M92.4708 75.3562L81.3662 85.9791L50.2926 56.0015L10.7038 94.3377C8.60814 96.3731 7.50009 98.9987 7.50009 101.865C7.476 107.707 12.39 112.452 18.4722 112.5H104.912C110.958 112.5 115.896 107.719 115.896 101.865V97.9268L92.4708 75.3562Z"
                  :fill="formData.colorSelected"/>
                <path
                  d="M81.3661 74.5131L92.4707 63.7577L115.776 86.3403V18.1349C115.776 12.2815 110.838 7.5 104.924 7.5H18.4842C12.4381 7.5 7.5 12.2694 7.5 18.1349V85.8706L50.2804 44.415L81.3661 74.5131ZM91.3506 24.8193C96.0358 24.8193 99.8537 28.5289 99.8537 33.0575C99.8537 37.5981 96.0478 41.2956 91.3506 41.2956C86.6534 41.2956 82.8355 37.5981 82.8355 33.0575C82.8475 28.5169 86.6655 24.8193 91.3506 24.8193Z"
                  :fill="formData.colorSelected"/>
              </svg>
            </div>

                <div class="jindex_boxq"><span v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal : '#ffffff'}">摔跤吧，爸爸</span><em  v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal : '#BEC3CA'}"></em></div>
          </div>



          <div class="jindex_box">
            <div class="jindex_box2 dotbox"
                 :style="{'border-radius':formData.largeCornerSize+'px', backgroundImage: iconsFlag.index_tab_bg ? getBgImgUrl_(iconsFlag.index_tab_bg) : getBgImgUrl('icon/png_index/index_tab_bg.png')}"
                 v-on:click="handleImgSelect('icon/png_index', 'index_tab_bg');" ></div>
            <div class="jindex_boxt" v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal : '#ffffff'}">设置</div>

            <div class="jindex_boxs">
              <img :src="iconsFlag.ic_settings_new" class="dotbox" height="32" v-if="iconsFlag.ic_settings_new"
                   v-on:click="handleImgSelect('icon/png_index', 'ic_settings_new');" width="32"/>
              <svg class="dotbox" fill="none"
                   height="120" v-if='!iconsFlag.ic_settings_new'
                   v-on:click="handleImgSelect('icon/png_index', 'ic_settings_new');" viewBox="0 0 120 120" width="120"
                   xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M16.7578 60C16.7578 53.8594 12.9023 48.6563 7.49999 46.582C8.78905 41.5195 10.7812 36.75 13.3828 32.3672C18.6797 34.7227 25.0781 33.7617 29.4141 29.4141C33.75 25.0781 34.7109 18.668 32.3555 13.3828C36.75 10.7812 41.5195 8.78906 46.582 7.5C48.668 12.9023 53.8711 16.7578 60 16.7578C66.1406 16.7578 71.3437 12.9023 73.418 7.5C78.4805 8.78906 83.25 10.7812 87.6328 13.3828C85.2773 18.6797 86.2383 25.0781 90.5742 29.4141C94.9102 33.75 101.32 34.7109 106.605 32.3672C109.219 36.75 111.211 41.5195 112.5 46.582C107.098 48.668 103.242 53.8711 103.242 60C103.242 66.1406 107.098 71.3438 112.5 73.418C111.211 78.4805 109.219 83.25 106.617 87.6328C101.32 85.2773 94.9219 86.2383 90.5859 90.5859C86.25 94.9219 85.2891 101.332 87.6445 106.617C83.25 109.219 78.4805 111.211 73.418 112.5C71.332 107.098 66.1289 103.242 60 103.242C53.8594 103.242 48.6562 107.098 46.582 112.5C41.5195 111.211 36.75 109.219 32.3672 106.617C34.7227 101.32 33.7617 94.9219 29.4258 90.5859C25.0898 86.25 18.6797 85.2891 13.3945 87.6328C10.7812 83.25 8.78905 78.4805 7.49999 73.418C12.9023 71.3438 16.7578 66.1406 16.7578 60ZM60 74.4141C67.957 74.4141 74.4141 67.957 74.4141 60C74.4141 52.043 67.957 45.5859 60 45.5859C52.043 45.5859 45.5859 52.043 45.5859 60C45.5859 67.957 52.043 74.4141 60 74.4141Z"
                  :fill="formData.colorSelected"/>
              </svg>
            </div>

                <div class="jindex_boxq"><span v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal : '#ffffff'}">个性化配置</span><em  v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal : '#BEC3CA'}"></em></div>
          </div>

        </div>
        <div class="jindex03" v-if="jindex03">

          <div class="jindex_box">
            <div class="jindex_box2 dotbox"
                 :style="{'border-radius':formData.largeCornerSize+'px', backgroundImage: iconsFlag.index_tab_bg ? getBgImgUrl_(iconsFlag.index_tab_bg) : getBgImgUrl('icon/png_index/index_tab_bg.png')}"
                 v-on:click="handleImgSelect('icon/png_index', 'index_tab_bg');" ></div>
            <div class="jindex_boxt" v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal : '#ffffff'}">个人中心</div>

            <div class="jindex_boxs">
              <img :src="iconsFlag.pcenter" class="dotbox" height="32" v-if="iconsFlag.pcenter"
                   v-on:click="handleImgSelect('icon/png_index', 'pcenter');" width="32"/>
              <svg class="dotbox" fill="none"
                   height="120" v-if='!iconsFlag.pcenter' v-on:click="handleImgSelect('icon/png_index', 'pcenter');"
                   viewBox="0 0 120 120" width="120" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd"
                      d="M98.2319 112.5H58.75H19.2681C16.9104 112.5 15 110.581 15 108.214L18.4141 73.9278C18.4141 60.6429 32.2861 61.071 34.634 61.071C40.7963 61.071 41.6745 66.594 58.75 66.6408C75.8238 66.594 76.7021 61.071 82.866 61.071C85.2123 61.071 99.0843 60.6429 99.0843 73.9278L102.5 108.214C102.5 110.581 100.588 112.5 98.2319 112.5ZM58.75 58.0712C44.8424 58.0712 33.5662 46.7506 33.5662 32.7856C33.5662 18.8206 44.8424 7.5 58.75 7.5C72.6576 7.5 83.9322 18.8206 83.9322 32.7856C83.9322 46.7506 72.6576 58.0712 58.75 58.0712Z"
                      :fill="formData.colorSelected"/>
              </svg>

            </div>

                <div class="jindex_boxq"><span v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal : '#ffffff'}">账户设置、用户分析</span><em  v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal : '#BEC3CA'}"></em></div>
          </div>


          <div class="jindex_box">
            <div class="jindex_box2 dotbox"
                 :style="{'border-radius':formData.largeCornerSize+'px', backgroundImage: iconsFlag.index_tab_bg ? getBgImgUrl_(iconsFlag.index_tab_bg) : getBgImgUrl('icon/png_index/index_tab_bg.png')}"
                 v-on:click="handleImgSelect('icon/png_index', 'index_tab_bg');" ></div>
            <div class="jindex_boxt" v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal : '#ffffff'}">行车记录仪</div>

            <div class="jindex_boxs" :style="{'border-radius':formData.largeCornerSize+'px'}">
              <img :src="iconsFlag.dvr_widget_icon" class="dotbox" height="32" v-if="iconsFlag.dvr_widget_icon"
                   v-on:click="handleImgSelect('icon/png_index', 'dvr_widget_icon');" width="32"/>
              <svg class="dotbox" fill="none"
                   height="120" v-if='!iconsFlag.dvr_widget_icon'
                   v-on:click="handleImgSelect('icon/png_index', 'dvr_widget_icon');" viewBox="0 0 120 120" width="120"
                   xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M102.679 99.7733C112.608 97.3892 119.999 88.3403 119.999 77.5034C119.999 64.8422 109.932 54.5833 97.4993 54.5833C85.0841 54.5833 75 64.8422 75 77.5034C75 88.3403 82.3904 97.3892 92.3191 99.7733C93.1652 99.972 93.7523 100.785 93.7523 101.688C93.7523 102.79 92.8889 103.675 91.8356 103.675H84.8596C83.5473 103.675 82.494 104.776 82.494 106.131V106.294C82.494 107.648 83.5473 108.75 84.8596 108.75H110.122C111.434 108.75 112.487 107.648 112.487 106.294V106.131C112.487 104.776 111.434 103.675 110.122 103.675H103.146C102.092 103.675 101.229 102.79 101.229 101.688C101.246 100.785 101.833 99.972 102.679 99.7733ZM97.4993 87.6721C91.9737 87.6721 87.5015 83.1025 87.5015 77.4853C87.5015 71.8682 91.9737 67.2986 97.4993 67.2986C103.025 67.2986 107.497 71.8682 107.497 77.4853C107.497 83.1205 103.025 87.6721 97.4993 87.6721Z"
                  :fill="formData.colorSelected"/>
                <path
                  d="M99.4313 74.598C98.2809 73.9492 96.879 73.9492 95.7286 74.598C94.5783 75.2468 93.8773 76.4543 93.8773 77.7519C93.8773 79.7703 95.5309 81.3923 97.5799 81.3923C99.629 81.3923 101.283 79.7523 101.283 77.7519C101.283 76.4543 100.582 75.2468 99.4313 74.598ZM64.8496 56.1433H27.5539L34.1683 23.1627H92.763L96.9868 44.2847C97.6339 47.5106 100.761 49.5832 103.979 48.9524C107.196 48.3036 109.263 45.1677 108.634 41.9418L104.32 20.3692C103.26 15.0887 98.5865 11.25 93.2123 11.25H33.7189C28.3268 11.25 23.6715 15.0707 22.6111 20.3692L15.781 54.4311C15.6732 54.9898 15.6013 55.5665 15.5833 56.1252H11.3235C5.06862 56.1252 0 61.2075 0 67.4792V85.3212C0 91.5929 5.06862 96.6751 11.3235 96.6751H16.1765V102.803C16.1765 106.083 18.8366 108.75 22.1078 108.75C25.3791 108.75 28.0392 106.083 28.0392 102.803V96.6751H63.0522C66.3234 96.6751 68.9836 94.0079 68.9836 90.7278C68.9836 87.4478 66.3234 84.7805 63.0522 84.7805H11.8627V68.0199H64.8496C68.1208 68.0199 70.781 65.3526 70.781 62.0725C70.781 58.8105 68.1208 56.1433 64.8496 56.1433Z"
                  :fill="formData.colorSelected"/>
              </svg>

            </div>

                <div class="jindex_boxq"><span v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal : '#ffffff'}">一键拍照、永久保存</span><em  v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal : '#BEC3CA'}"></em></div>


                  <div class="jindex_boxf jindex_boxf4">

                    <div class="jmusci_kl_ba">
                      <img :src="iconsFlag.dvr_photo_normal" class="dotbox" height="32"
                           v-if="iconsFlag.dvr_photo_normal"
                           v-on:click="handleImgSelect('icon/png_index', 'dvr_photo_normal');" width="32"/>
                      <svg class="dotbox" fill="none"
                           height="40" v-if='!iconsFlag.dvr_photo_normal'
                           v-on:click="handleImgSelect('icon/png_index', 'dvr_photo_normal');" viewBox="0 0 40 40"
                           width="40" xmlns="http://www.w3.org/2000/svg">
                        <g clip-path="url(#clip0)">
                          <path fill-rule="evenodd" clip-rule="evenodd"
                                d="M32.76 31.25H7.24C6.0025 31.25 5 30.2574 5 29.0339V14.1394C5 12.915 6.0025 11.9224 7.24 11.9224H11.6725C12.7383 11.9224 13.6458 11.0895 13.9133 9.69319C14.1317 8.37875 14.9192 7.5 16.1492 7.5H19.9075H23.6658C24.895 7.5 25.6833 8.37875 25.9008 9.69319C26.1683 11.0895 27.0758 11.9224 28.1417 11.9224H28.3267H32.76C33.9967 11.9224 34.9992 12.915 34.9992 14.1394V29.0339C34.9992 30.2574 33.9967 31.25 32.76 31.25ZM20 13.4408C15.86 13.4408 12.505 16.7617 12.505 20.8581C12.505 24.9554 15.86 28.2763 20 28.2763C24.1392 28.2763 27.4942 24.9554 27.4942 20.8581C27.4942 16.7617 24.1392 13.4408 20 13.4408ZM31.46 14.2974C30.8458 14.2974 30.3475 14.7904 30.3475 15.3981C30.3475 16.0058 30.8458 16.4988 31.46 16.4988C32.0742 16.4988 32.5717 16.0058 32.5717 15.3981C32.5717 14.7904 32.0742 14.2974 31.46 14.2974ZM20 25.7711C17.2583 25.7711 15.0367 23.5714 15.0367 20.8581C15.0367 18.1457 17.2583 15.946 20 15.946C22.7408 15.946 24.9633 18.1457 24.9633 20.8581C24.9633 23.5714 22.7408 25.7711 20 25.7711Z"
                                :fill="formData.colorSelected"/>
                        </g>
                        <defs>
                          <clipPath id="clip0">
                            <rect x="5" y="7.5" width="30" height="23.75" fill="white"/>
                          </clipPath>
                        </defs>
                      </svg>
                    </div>

                    <div class="jmusci_kl_ba">
                      <img :src="iconsFlag.dvr_record_normal" class="dotbox" height="32"
                           v-if="iconsFlag.dvr_record_normal"
                           v-on:click="handleImgSelect('icon/png_index', 'dvr_record_normal');" width="32"/>
                      <svg class="dotbox" fill="none"
                           height="40" v-if='!iconsFlag.dvr_record_normal'
                           v-on:click="handleImgSelect('icon/png_index', 'dvr_record_normal');" viewBox="0 0 40 40"
                           width="40" xmlns="http://www.w3.org/2000/svg">
                        <g clip-path="url(#clip0)">
                          <path fill-rule="evenodd" clip-rule="evenodd"
                                d="M36.4002 29.0013L30.7111 26.4656C30.0409 26.1383 29.413 25.4543 29.413 24.2189V16.0375C29.413 14.8021 30.0409 14.1172 30.7111 13.7909L36.4002 11.2551C37.1142 11.2551 37.6982 11.4732 37.6982 12.7094V27.547C37.6982 28.7832 37.1142 29.0013 36.4002 29.0013ZM24.4438 29.0064H3.73505C2.36247 29.0064 1.25 27.8708 1.25 26.4698V13.7866C1.25 12.3856 2.36247 11.25 3.73505 11.25H24.4438C25.8164 11.25 26.9288 12.3856 26.9288 13.7866V26.4698C26.9288 27.8708 25.8164 29.0064 24.4438 29.0064Z"
                                :fill="formData.colorSelected"/>
                        </g>
                        <defs>
                          <clipPath id="clip0">
                            <rect x="1.25" y="11.25" width="36.4474" height="17.7564" fill="white"/>
                          </clipPath>
                        </defs>
                      </svg>
                    </div>

                  </div>

          </div>


          <div class="jindex_box">
            <div class="jindex_box2 dotbox"
                 :style="{'border-radius':formData.largeCornerSize+'px', backgroundImage: iconsFlag.index_tab_bg ? getBgImgUrl_(iconsFlag.index_tab_bg) : getBgImgUrl('icon/png_index/index_tab_bg.png')}"
                 v-on:click="handleImgSelect('icon/png_index', 'index_tab_bg');" ></div>
            <div class="jindex_boxt" v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal : '#ffffff'}">更多</div>

            <div class="jindex_boxs">
              <img :src="iconsFlag.more_card_center_icon" class="dotbox" height="32"
                   v-if="iconsFlag.more_card_center_icon"
                   v-on:click="handleImgSelect('icon/png_index', 'more_card_center_icon');" width="32"/>
              <svg class="dotbox" fill="none"
                   height="120" v-if='!iconsFlag.more_card_center_icon'
                   v-on:click="handleImgSelect('icon/png_index', 'more_card_center_icon');" viewBox="0 0 120 120"
                   width="120" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M30 52.5H52.5V30C52.5 25.5499 51.1804 21.1998 48.7081 17.4997C46.2357 13.7996 42.7217 10.9157 38.6104 9.21272C34.499 7.50975 29.9751 7.06417 25.6105 7.93234C21.2459 8.80051 17.2368 10.9434 14.0901 14.0901C10.9434 17.2368 8.80051 21.2459 7.93234 25.6105C7.06418 29.975 7.50975 34.499 9.21272 38.6104C10.9157 42.7217 13.7996 46.2357 17.4997 48.7081C21.1998 51.1804 25.5499 52.5 30 52.5ZM90 112.5C95.9674 112.5 101.69 110.129 105.91 105.91C110.129 101.69 112.5 95.9674 112.5 90C112.5 84.0326 110.129 78.3097 105.91 74.0901C101.69 69.8705 95.9674 67.5 90 67.5H67.5V90C67.5 95.9674 69.8705 101.69 74.0901 105.91C78.3097 110.129 84.0326 112.5 90 112.5ZM112.5 30C112.5 27.0453 111.918 24.1195 110.787 21.3896C109.657 18.6598 107.999 16.1794 105.91 14.0901C103.821 12.0008 101.34 10.3435 98.6104 9.21272C95.8806 8.08199 92.9547 7.50001 90 7.50001C87.0453 7.50001 84.1195 8.08199 81.3896 9.21272C78.6598 10.3435 76.1794 12.0008 74.0901 14.0901C72.0008 16.1794 70.3434 18.6598 69.2127 21.3896C68.082 24.1195 67.5 27.0453 67.5 30V52.5H90C95.9674 52.5 101.69 50.1295 105.91 45.9099C110.129 41.6903 112.5 35.9674 112.5 30ZM7.50002 90C7.50002 95.9674 9.87054 101.69 14.0901 105.91C18.3097 110.129 24.0326 112.5 30 112.5C35.9674 112.5 41.6903 110.129 45.9099 105.91C50.1295 101.69 52.5 95.9674 52.5 90V67.5H30C24.0326 67.5 18.3097 69.8705 14.0901 74.0901C9.87054 78.3097 7.50002 84.0326 7.50002 90Z"
                  :fill="formData.colorSelected"/>
              </svg>

            </div>

                <div class="jindex_boxq"><span v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal : '#ffffff'}">海量应用、待你探索</span><em  v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal : '#BEC3CA'}"></em></div>
          </div>

        </div>





        <div class="jindex04" v-if="jindex04"  >

          <div class="jindex_box">
            <div class="jindex_box2 dotbox"
                 :style="{'border-radius':formData.largeCornerSize+'px', backgroundImage: iconsFlag.index_tab_bg ? getBgImgUrl_(iconsFlag.index_tab_bg) : getBgImgUrl('icon/png_index/index_tab_bg.png')}"
                 v-on:click="handleImgSelect('icon/png_index', 'index_tab_bg');" ></div>
            <div class="jindex_boxt" v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal : '#ffffff'}">智慧加油</div>

            <div class="jindex_boxs">
              <img :src="iconsFlag.oil_center" class="dotbox" height="32" v-if="iconsFlag.oil_center"
                   v-on:click="handleImgSelect('icon/png_index', 'oil_center');" width="32"/>
              <svg class="dotbox" fill="none"
                   height="120" v-if='!iconsFlag.oil_center'
                   v-on:click="handleImgSelect('icon/png_index', 'oil_center');" viewBox="0 0 120 120" width="120"
                   xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd"
                      d="M105.29 41.143C105.29 52.677 108.341 72.8466 109.496 85.9334C110.08 92.523 103.732 101.973 93.3661 101.973C84.4189 101.973 77.5 94.3414 77.5 85.4545V58.4091C77.3409 54.4605 72.8545 52.4495 69.5455 52.0455V104.545H75.9091V112.5H7.5V104.545H13.8636V12.2727C13.8636 9.86091 15.8889 7.5 18.6364 7.5H64.7727C67.5473 7.5 69.5455 9.86091 69.5455 12.2727V44.0909C76.773 44.7098 84.7609 49.1834 85.4545 56.8182V83.8636C85.4545 90.6011 88.3723 94.4305 93.6859 94.4305C98.3314 94.4305 101.949 90.8716 101.949 86.2611C101.949 78.2 97.9686 53.9466 97.9686 43.348C97.9686 28.6257 82.3014 17.5768 75.9091 15.4545V7.5C90.1398 10.3175 108.033 26.6514 112.441 39.1861L105.29 41.143ZM20.2273 15.4545V44.0909H63.1818V15.4545H20.2273Z"
                      :fill="formData.colorSelected"/>
              </svg>
            </div>

                <div class="jindex_boxq"><span v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal : '#ffffff'}">方便快捷</span><em  v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal : '#BEC3CA'}"></em></div>
          </div>


          <div class="jindex_box">
            <div class="jindex_box2 dotbox"
                 :style="{'border-radius':formData.largeCornerSize+'px', backgroundImage: iconsFlag.index_tab_bg ? getBgImgUrl_(iconsFlag.index_tab_bg) : getBgImgUrl('icon/png_index/index_tab_bg.png')}"
                 v-on:click="handleImgSelect('icon/png_index', 'index_tab_bg');" ></div>
            <div class="jindex_boxt" v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal : '#ffffff'}">用户手册</div>

            <div class="jindex_boxs">
              <img :src="iconsFlag.manual_center" class="dotbox" height="32" v-if="iconsFlag.manual_center"
                   v-on:click="handleImgSelect('icon/png_index', 'manual_center');" width="32"/>
              <svg class="dotbox" fill="none"
                   height="120" v-if='!iconsFlag.manual_center'
                   v-on:click="handleImgSelect('icon/png_index', 'manual_center');" viewBox="0 0 120 120" width="120"
                   xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd"
                      d="M103.245 112.5H34.6099C28.0386 112.5 24.805 102.778 24.805 102.778V93.0556H28.7269C35.0178 93.0556 34.6099 85.2778 34.6099 85.2778C34.6099 77.7781 28.7269 77.5 28.7269 77.5H24.805L24.65 63.7508H28.1857C35.2335 63.7508 34.6099 56.1111 34.6099 56.1111C34.6099 48.1428 28.2191 48.5122 28.2191 48.5122L24.7089 48.52L24.805 34.7222H28.7269C34.8649 34.7222 34.6099 26.9444 34.6099 26.9444C34.6099 20.1447 28.7269 19.1667 28.7269 19.1667H24.805V11.3889C24.805 9.31611 26.6503 7.5 28.7269 7.5H91.4787C93.5554 7.5 95.4007 9.31611 95.4007 11.3889L103.407 11.4881C106.459 11.4881 107.167 15.2778 107.167 15.2778V108.611C107.167 111.423 103.245 112.5 103.245 112.5ZM87.5567 32.7778H42.4539V65.8333H87.5567V32.7778ZM99.3227 100.833V15.2778H95.4007V96.9444C95.4007 99.0172 93.5554 100.833 91.4787 100.833H32.6489C32.6489 103.412 36.5709 104.722 36.5709 104.722H97.3617L95.891 105C99.8875 105 99.3227 100.833 99.3227 100.833ZM52.2589 38.6111H77.7518C79.9187 38.6111 81.6738 40.3514 81.6738 42.5C81.6738 44.6486 79.9187 46.3889 77.7518 46.3889H52.2589C50.092 46.3889 48.3369 44.6486 48.3369 42.5C48.3369 40.3514 50.092 38.6111 52.2589 38.6111ZM52.2589 52.2222H77.7518C79.9187 52.2222 81.6738 53.9625 81.6738 56.1111C81.6738 58.2597 79.9187 60 77.7518 60H52.2589C50.092 60 48.3369 58.2597 48.3369 56.1111C48.3369 53.9625 50.092 52.2222 52.2589 52.2222ZM30.6879 26.9444C30.6879 29.0931 28.9329 30.8333 26.766 30.8333H18.922C16.7551 30.8333 15 29.0931 15 26.9444C15 24.7958 16.7551 23.0556 18.922 23.0556H26.766C28.9329 23.0556 30.6879 24.7958 30.6879 26.9444ZM18.922 52.2222H26.766C28.9329 52.2222 30.6879 53.9625 30.6879 56.1111C30.6879 58.2597 28.9329 60 26.766 60H18.922C16.7551 60 15 58.2597 15 56.1111C15 53.9625 16.7551 52.2222 18.922 52.2222ZM18.922 81.3889H26.766C28.9329 81.3889 30.6879 83.1292 30.6879 85.2778C30.6879 87.4264 28.9329 89.1667 26.766 89.1667H18.922C16.7551 89.1667 15 87.4264 15 85.2778C15 83.1292 16.7551 81.3889 18.922 81.3889Z"
                      :fill="formData.colorSelected"/>
              </svg>
            </div>

                <div class="jindex_boxq"><span v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal : '#ffffff'}">详细描述</span><em  v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal : '#BEC3CA'}"></em></div>
          </div>


        </div>

        <div class="jindex_yd" >
          <em :class="activejindex == 1? 'active':''"  v-bind:style="{background: formData && formData.colorSelected ? formData.colorSelected : '#00C4B4'}" @click="changeIndex($event,'4', '4-1')"></em>
          <em :class="activejindex == 2? 'active':''"  v-bind:style="{background: formData && formData.colorSelected ? formData.colorSelected : '#00C4B4'}" @click="changeIndex($event,'4', '4-2')"></em>
          <em :class="activejindex == 3? 'active':''"  v-bind:style="{background: formData && formData.colorSelected ? formData.colorSelected : '#00C4B4'}" @click="changeIndex($event,'4', '4-3')"></em>
          <em :class="activejindex == 4? 'active':''"  v-bind:style="{background: formData && formData.colorSelected ? formData.colorSelected : '#00C4B4'}" @click="changeIndex($event,'4', '4-4')"></em>
        </div>
        </div>

        <!-- 左侧导航 -->
        <div class="jfm_leftnav" v-if="leftarea">

          <template v-if="voice">

            <div class="jfm_leftnav01">
              <div class="jt_nav_fh"  @click="(editable === false) ? changeIndex($event, '2', '2-1') : ''">

                <img :src="iconsFlag.ic_back_btn" class="dotbox" height="32" v-if="iconsFlag.ic_back_btn"
                     v-on:click="handleImgSelect('icon/png', 'ic_back_btn');" width="32"/>

                <svg :fill="formData.colorNormal" class="dotbox" height="32" v-if='!iconsFlag.ic_back_btn'
                     v-on:click="handleImgSelect('icon/png', 'ic_back_btn');" viewBox="0 0 32 32" width="32"
                     xmlns="http://www.w3.org/2000/svg">

                  <path clip-rule="evenodd"
                        d="M20.546 9.88L18.666 8L10.666 16L18.666 24L20.546 22.12L14.4393 16L20.546 9.88Z"
                        fill-rule="evenodd"/>

                </svg>
              </div>

              <div class="jt_nav_zt" v-if='jfm_leftnav01'
                   v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected : '#00C4B4'}">
                <img :src="iconsFlag.ic_vehicle" class="dotbox" height="32" v-if="iconsFlag.ic_vehicle"
                     v-on:click="handleImgSelect('icon/png', 'ic_vehicle','ic_vehicle_unselected');" width="32"/>

                <svg class="dotbox" fill="none" height="32" v-if='!iconsFlag.ic_vehicle'
                     v-on:click="handleImgSelect('icon/png', 'ic_vehicle','ic_vehicle_unselected');" viewBox="0 0 32 32"
                     width="32" xmlns="http://www.w3.org/2000/svg">
                  <path :fill="formData.colorSelected"
                        d="M29.1175 6H3.24616C2.57076 6 2 6.56759 2 7.30007V23.6999C2 24.4039 2.54222 25 3.24616 25H29.1175C29.7929 25 30.3636 24.4324 30.3636 23.6999V7.2747C30.3605 6.56759 29.7929 6 29.1175 6ZM28.3026 22.9262H4.05157V8.11499H28.274L28.3026 22.9262Z"/>
                  <path :fill="formData.colorSelected"
                        d="M8.07227 12.4178H10.238V14.5836H8.07227V12.4178ZM11.7029 12.4178H13.8687V14.5836H11.7029V12.4178ZM15.2448 12.4178H17.4106V14.5836H15.2448V12.4178ZM18.7074 12.4178H20.8732V14.5836H18.7074V12.4178ZM22.224 12.4178H24.3897V14.5836H22.224V12.4178ZM8.07227 16.0453H10.238V18.2111H8.07227V16.0453ZM11.7029 16.0453H13.8687V18.2111H11.7029V16.0453ZM15.2448 16.0453H17.4106V18.2111H15.2448V16.0453ZM18.7074 16.0453H20.8732V18.2111H18.7074V16.0453ZM22.224 16.0453H24.3897V18.2111H22.224V16.0453Z"/>
                </svg>
                <span :style="{'font-family': formData.fontfamily}">中控主题</span>
              </div>
              <div class="jt_nav_fg" v-if='jfm_leftnav01' ></div>

              <div class="jt_nav_zt" v-if='jfm_leftnav01'
                   v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal : '#ffffff'}">
                <img :src="iconsFlag.ic_instrument" class="dotbox" height="32" v-if="iconsFlag.ic_instrument"
                     v-on:click="handleImgSelect('icon/png', 'ic_instrument','ic_instrument_unselected');" width="32"/>
                <svg class="dotbox" fill="none" height="32" v-if='!iconsFlag.ic_instrument'
                     v-on:click="handleImgSelect('icon/png', 'ic_instrument','ic_instrument_unselected');"
                     viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg">
                  <g clip-path="url(#clip0)">
                    <path :fill="formData.colorNormal"
                          d="M17.3994 10.4C17.3994 10.7713 17.2519 11.1274 16.9894 11.3899C16.7268 11.6525 16.3707 11.8 15.9994 11.8C15.6281 11.8 15.272 11.6525 15.0095 11.3899C14.7469 11.1274 14.5994 10.7713 14.5994 10.4C14.5994 10.0287 14.7469 9.6726 15.0095 9.41005C15.272 9.1475 15.6281 9 15.9994 9C16.3707 9 16.7268 9.1475 16.9894 9.41005C17.2519 9.6726 17.3994 10.0287 17.3994 10.4Z"/>
                    <path :fill="formData.colorNormal"
                          d="M9 18.8C9 19.1713 8.8525 19.5274 8.58995 19.7899C8.3274 20.0525 7.97131 20.2 7.6 20.2C7.2287 20.2 6.8726 20.0525 6.61005 19.7899C6.3475 19.5274 6.2 19.1713 6.2 18.8C6.2 18.4287 6.3475 18.0726 6.61005 17.81C6.8726 17.5475 7.2287 17.4 7.6 17.4C7.97131 17.4 8.3274 17.5475 8.58995 17.81C8.8525 18.0726 9 18.4287 9 18.8Z"/>
                    <path :fill="formData.colorNormal"
                          d="M25.7998 18.8C25.7998 19.1713 25.6523 19.5274 25.3898 19.7899C25.1272 20.0525 24.7711 20.2 24.3998 20.2C24.0285 20.2 23.6724 20.0525 23.4099 19.7899C23.1473 19.5274 22.9998 19.1713 22.9998 18.8C22.9998 18.4287 23.1473 18.0726 23.4099 17.81C23.6724 17.5475 24.0285 17.4 24.3998 17.4C24.7711 17.4 25.1272 17.5475 25.3898 17.81C25.6523 18.0726 25.7998 18.4287 25.7998 18.8Z"/>
                    <path :fill="formData.colorNormal"
                          d="M22.9294 11.87C23.125 12.0658 23.2582 12.3153 23.3121 12.5868C23.366 12.8583 23.3382 13.1397 23.2321 13.3955C23.1261 13.6512 22.9467 13.8698 22.7165 14.0235C22.4863 14.1773 22.2157 14.2594 21.9389 14.2594C21.662 14.2594 21.3914 14.1773 21.1612 14.0235C20.931 13.8698 20.7516 13.6512 20.6456 13.3955C20.5396 13.1397 20.5118 12.8583 20.5657 12.5868C20.6195 12.3153 20.7527 12.0658 20.9484 11.87C21.0784 11.7398 21.2328 11.6365 21.4028 11.5661C21.5727 11.4956 21.7549 11.4594 21.9389 11.4594C22.1228 11.4594 22.305 11.4956 22.475 11.5661C22.6449 11.6365 22.7993 11.7398 22.9294 11.87ZM9.06936 11.87C9.26522 11.6743 9.51468 11.5411 9.78621 11.4872C10.0577 11.4333 10.3392 11.4612 10.5949 11.5672C10.8506 11.6732 11.0692 11.8526 11.2229 12.0828C11.3767 12.313 11.4588 12.5836 11.4588 12.8605C11.4588 13.1373 11.3767 13.4079 11.2229 13.6381C11.0692 13.8683 10.8506 14.0477 10.5949 14.1537C10.3392 14.2597 10.0577 14.2876 9.78621 14.2337C9.51468 14.1798 9.26522 14.0466 9.06936 13.851C8.9392 13.7209 8.83593 13.5665 8.76548 13.3966C8.69503 13.2266 8.65876 13.0444 8.65876 12.8605C8.65876 12.6765 8.69503 12.4943 8.76548 12.3243C8.83593 12.1544 8.9392 12 9.06936 11.87Z"/>
                    <path :fill="formData.colorNormal"
                          d="M6.10195 8.90199C8.05987 6.94466 10.5542 5.61177 13.2695 5.07183C15.9848 4.53188 18.7993 4.80912 21.3571 5.8685C23.9149 6.92788 26.1012 8.72184 27.6396 11.0236C29.178 13.3253 29.9994 16.0315 29.9999 18.8C30.0081 21.8305 29.0248 24.7805 27.1999 27.2L25.1979 25.198C26.797 22.9006 27.4779 20.0877 27.1065 17.3134C26.735 14.539 25.3382 12.0043 23.1911 10.2085C21.044 8.41268 18.3023 7.48592 15.506 7.61076C12.7097 7.73559 10.0615 8.90298 8.08295 10.883C6.22541 12.7408 5.08006 15.1924 4.84717 17.8092C4.61429 20.426 5.30869 23.0414 6.80895 25.198L4.79995 27.2C2.77855 24.5039 1.79737 21.1692 2.03654 17.808C2.27571 14.4468 3.71916 11.2847 6.10195 8.90199Z"/>
                    <path :fill="formData.colorNormal"
                          d="M17.8204 21.25C18.0989 21.7327 18.1742 22.3062 18.0298 22.8444C17.8854 23.3827 17.5331 23.8415 17.0504 24.12C16.5677 24.3984 15.9941 24.4738 15.4559 24.3294C14.9177 24.185 14.4589 23.8327 14.1804 23.35C13.5994 22.349 12.1504 15.65 12.1504 15.65C12.1504 15.65 17.2394 20.249 17.8204 21.25Z"/>
                  </g>
                  <defs>
                    <clipPath id="clip0">
                      <rect :fill="formData.colorNormal" height="28" transform="matrix(-1 0 0 1 30 2)" width="28"/>
                    </clipPath>
                  </defs>
                </svg>
                <span :style="{'font-family': formData.fontfamily}">仪表盘</span>
              </div>
            </div>

            <div class="jfm_leftnav02" v-if='jfm_leftnav02'>

              <div class="jt_nav_zt "
                   v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected : '#00C4B4'}">
                <img :src="iconsFlag.ic_my_purchase" class="dotbox" height="32" v-if="iconsFlag.ic_my_purchase"
                     v-on:click="handleImgSelect('icon/png', 'ic_my_purchase','ic_my_purchase_unselected');"
                     width="32"/>
                <svg class="dotbox" fill="none" height="32" v-if='!iconsFlag.ic_my_purchase'
                     v-on:click="handleImgSelect('icon/png', 'ic_my_purchase','ic_my_purchase_unselected');"
                     viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg">
                  <path
                    d="M25.9471 7.48169C26.4489 7.48169 26.8385 7.54791 27.1085 7.68289C27.2435 7.74147 27.3632 7.80769 27.46 7.88155C27.5542 7.95796 27.6332 8.04455 27.6892 8.13878C27.8054 8.31569 27.8592 8.52634 27.842 8.7373C27.842 8.8137 27.8318 8.88502 27.8242 8.95124L27.7936 9.13716C27.7837 9.19535 27.7684 9.25248 27.7478 9.3078L27.4014 10.2501L26.8487 11.819L26.2349 13.5C25.9828 14.2258 25.8274 14.6715 25.7714 14.8422C25.6666 15.1341 25.5344 15.4156 25.3766 15.6826C25.2524 15.8969 25.0901 16.0868 24.8978 16.2429C24.5267 16.516 24.0747 16.6568 23.6142 16.6428H9.75154L10.159 18.9172H23.4435C24.2968 18.9172 24.7221 19.2661 24.7221 19.9716C24.7221 20.3154 24.6355 20.6083 24.4623 20.8553C24.3069 21.1024 23.9758 21.2272 23.4716 21.2272H9.63948C9.42651 21.2272 9.21493 21.1928 9.01294 21.1253C8.92357 21.0962 8.83934 21.0533 8.76335 20.998C8.5285 20.8442 8.33028 20.6408 8.18266 20.402C8.01528 20.1518 7.87847 19.8825 7.77516 19.5997C7.70019 19.3265 7.63225 19.0513 7.57141 18.7745L7.42624 18.0283L7.13589 16.5817L6.75641 14.6155L6.31835 12.4201L5.18244 6.68452H3.20097C2.92845 6.68452 2.71452 6.62594 2.55916 6.51133C2.38088 6.38144 2.22806 6.22863 2.09308 6.05544C2.05666 5.94874 2.01239 5.84488 1.96064 5.74472C1.91393 5.65469 1.87966 5.55873 1.85877 5.45947C1.82407 5.28066 1.80532 5.09912 1.80273 4.91699C1.80273 4.57316 1.91734 4.28791 2.14911 4.05869C2.28515 3.96456 2.43228 3.88758 2.58717 3.82947C2.74253 3.77598 2.91827 3.74542 3.11183 3.74542H5.79369C6.14261 3.74542 6.42532 3.79381 6.63671 3.88805C6.73082 3.94321 6.82339 4.00096 6.91432 4.06123C7.00091 4.11727 7.08496 4.18348 7.16391 4.25989C7.26821 4.40679 7.34659 4.57046 7.39568 4.7438L7.54085 5.20224L7.62744 5.63011V5.77274L7.7446 6.51388L7.88977 7.48424H25.9471V7.48169ZM21.513 21.9683C21.8415 21.9705 22.1671 22.0291 22.4757 22.1415C22.7761 22.2478 23.0467 22.4242 23.2653 22.656C23.4945 22.8852 23.683 23.1271 23.8179 23.3946C24.0606 23.9809 24.0606 24.6395 23.8179 25.2258C23.6702 25.5057 23.4842 25.7637 23.2653 25.9924C23.0393 26.2078 22.7702 26.3727 22.4757 26.4763C22.1755 26.6107 21.8496 26.6785 21.5207 26.6749C21.1893 26.6803 20.8608 26.6133 20.5579 26.4788C20.2781 26.3644 20.0217 26.1995 19.8015 25.9924C19.5723 25.7453 19.394 25.4856 19.2769 25.2232C19.0701 24.7977 19.0135 24.3148 19.1164 23.853C19.1444 23.7002 19.1979 23.5474 19.2769 23.3946C19.4026 23.1169 19.5807 22.8661 19.8015 22.656C19.9008 22.5388 20.0155 22.442 20.1504 22.3554C20.5577 22.0892 21.0368 21.9541 21.5232 21.9683H21.5181H21.513ZM10.536 21.9123C10.8671 21.9123 11.188 21.9683 11.4987 22.0829C11.7934 22.2 12.0612 22.3759 12.2857 22.5999C12.5035 22.8121 12.6805 23.0624 12.8078 23.3385C12.9453 23.6442 13.0115 23.9498 13.0115 24.2707C13.0115 24.5814 12.9453 24.8819 12.8078 25.1621C12.6788 25.4485 12.5013 25.7104 12.2831 25.9364C12.0539 26.1452 11.7839 26.3107 11.4834 26.433C10.872 26.6782 10.1904 26.6828 9.5758 26.4457C9.28546 26.3158 9.02313 26.1452 8.78882 25.9364C8.55705 25.6893 8.38132 25.4321 8.26416 25.1646C8.147 24.8794 8.08728 24.5739 8.08843 24.2656C8.08843 23.9498 8.14701 23.6442 8.26671 23.3385C8.32558 23.2033 8.39812 23.0744 8.48319 22.954C8.56979 22.8317 8.67166 22.7095 8.78882 22.5974C8.86522 22.521 8.95182 22.4548 9.0486 22.3936L9.28291 22.223C9.37969 22.1695 9.47647 22.1211 9.57326 22.0829C9.64966 22.0626 9.73116 22.0396 9.80757 22.0116C9.88398 21.9836 9.96293 21.9607 10.0393 21.9556L10.2864 21.925C10.3755 21.9148 10.4596 21.9123 10.5385 21.9123H10.536Z"
                    :fill="formData.colorSelected"/>
                </svg>
                <span :style="{'font-family': formData.fontfamily}">我的购买</span>
              </div>
              <div class="jt_nav_fg"></div>

              <div class="jt_nav_zt"
                   v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal : '#ffffff'}">
                <img :src="iconsFlag.ic_my_favourite" class="dotbox" height="32" v-if="iconsFlag.ic_my_favourite"
                     v-on:click="handleImgSelect('icon/png', 'ic_my_favourite','ic_my_favourite_unselected');"
                     width="32"/>
                <svg class="dotbox" fill="none" height="32" v-if='!iconsFlag.ic_my_favourite'
                     v-on:click="handleImgSelect('icon/png', 'ic_my_favourite','ic_my_favourite_unselected');"
                     viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd"
                        d="M15.9993 28.4667L14.066 26.7067C7.19935 20.48 2.66602 16.3733 2.66602 11.3333C2.66602 7.22667 5.89268 4 9.99935 4C12.3193 4 14.546 5.08 15.9993 6.78667C17.4527 5.08 19.6793 4 21.9993 4C26.106 4 29.3327 7.22667 29.3327 11.3333C29.3327 16.3733 24.7993 20.48 17.9327 26.72L15.9993 28.4667Z"
                        :fill="formData.colorNormal"/>
                </svg>
                <span :style="{'font-family': formData.fontfamily}">我的收藏</span>
              </div>

              <div class="jt_nav_fg"></div>

              <div class="jt_nav_zt"
                   v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal : '#ffffff'}">
                <img :src="iconsFlag.ic_my_downloaded" class="dotbox" height="32" v-if="iconsFlag.ic_my_downloaded"
                     v-on:click="handleImgSelect('icon/png', 'ic_my_downloaded','ic_my_downloaded_unselected');"
                     width="32"/>
                <svg class="dotbox" fill="none" height="32" v-if='!iconsFlag.ic_my_downloaded'
                     v-on:click="handleImgSelect('icon/png', 'ic_my_downloaded','ic_my_downloaded_unselected');"
                     viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg">
                  <path :fill="formData.colorNormal"
                        d="M24.9959 12.43H19.2839V3.862H10.7159V12.43H5.00391L14.9999 22.426L24.9959 12.43ZM16.6099 25.282H5.00391V28.138H18.0799C17.3659 27.34 16.8479 26.36 16.6099 25.282ZM22.8539 18.506C19.8999 18.506 17.5059 20.9 17.5059 23.854C17.5059 26.808 19.8999 29.202 22.8539 29.202C25.8079 29.202 28.2019 26.808 28.2019 23.854C28.2019 20.9 25.8079 18.506 22.8539 18.506ZM26.1859 22.538L22.4479 26.15C22.3919 26.206 22.3359 26.234 22.2799 26.262C22.0419 26.43 21.7199 26.402 21.5099 26.192L19.8999 24.596C19.6619 24.358 19.6619 23.98 19.8999 23.742C20.1379 23.504 20.5159 23.504 20.7539 23.742L21.9579 24.946L25.3459 21.684C25.5839 21.446 25.9619 21.446 26.1999 21.684C26.4239 21.922 26.4239 22.3 26.1859 22.538Z"/>
                </svg>
                <span :style="{'font-family': formData.fontfamily}">已下载</span>
              </div>


            </div>


            <div class="jfm_leftnav03" v-if='jfm_leftnav03'>


              <div class="jt_nav_zt " @click="(editable === false) ? changeIndex($event, '3', '3-1') : '' "
                   v-bind:style="{color: iconAttributes.icRadio.fillColor }">
                <img :src="iconsFlag[iconAttributes.icRadio.icon]" class="dotbox" height="32"
                     v-if="iconsFlag[iconAttributes.icRadio.icon]"
                     v-on:click="handleImgSelect('icon/png_music', 'ic_radio_down','ic_radio');"
                     width="32"/>
                <svg class="dotbox" fill="none"
                     height="52" v-if="!iconsFlag[iconAttributes.icRadio.icon]"
                     v-on:click="handleImgSelect('icon/png_music', 'ic_radio_down','ic_radio');" viewBox="0 0 52 52"
                     width="52" xmlns="http://www.w3.org/2000/svg" :fill=" iconAttributes.icRadio.fillColor">
                  <g clip-path="url(#clip0)">
                    <path fill-rule="evenodd" clip-rule="evenodd"
                          d="M44.6136 45.5H7.38636C5.10171 45.5 3.25 43.6939 3.25 41.4655V19.9483C3.25 17.7199 5.10171 15.9138 7.38636 15.9138H30.3501L19.5983 9.85402L21.4472 6.72729L37.7473 15.9138H44.6136C46.8983 15.9138 48.75 17.7199 48.75 19.9483V41.4655C48.75 43.6939 46.8983 45.5 44.6136 45.5ZM21.1742 25.3276H10.1439V29.0366H21.1742V25.3276ZM21.1742 30.8696H10.1439V34.5787H21.1742V30.8696ZM21.1742 36.4117H10.1439V40.1207H21.1742V36.4117ZM35.0159 24.7278C30.8947 24.7278 27.5525 27.9971 27.5525 32.0302C27.5525 36.0634 30.8947 39.334 35.0159 39.334C39.1371 39.334 42.4793 36.0634 42.4793 32.0302C42.4793 27.9971 39.1371 24.7278 35.0159 24.7278ZM35.0159 35.6828C32.9601 35.6828 31.2945 34.0475 31.2945 32.0302C31.2945 30.0143 32.9601 28.379 35.0159 28.379C37.0717 28.379 38.7372 30.0143 38.7372 32.0302C38.7372 34.0475 37.0717 35.6828 35.0159 35.6828Z"/>
                  </g>
                  <defs>
                    <clipPath id="clip0">
                      <rect x="3.25" y="6.5" width="45.5" height="39" :fill="formData.colorNormal"/>
                    </clipPath>
                  </defs>
                </svg>
                <span :style="{'font-family': formData.fontfamily}">收音机</span>
              </div>
              <div class="jt_nav_fg"></div>


              <div class="jt_nav_zt" @click="(editable === false) ? changeIndex($event, '3', '3-2') : '' "
                   v-bind:style="{color: iconAttributes.icKRadio.fillColor}">

                <img :src="iconsFlag[iconAttributes.icKRadio.icon]" class="dotbox" height="32" v-if="iconsFlag[iconAttributes.icKRadio.icon]"
                     v-on:click="handleImgSelect('icon/png', 'ic_k_radio','ic_k_radio_down');"
                     width="32"/>

                <svg class="dotbox" fill="none"
                     height="52" v-if='!iconsFlag[iconAttributes.icKRadio.icon]'
                     v-on:click="handleImgSelect('icon/png', 'ic_k_radio','ic_k_radio_down');" viewBox="0 0 52 52"
                     width="52" xmlns="http://www.w3.org/2000/svg" :fill="iconAttributes.icKRadio.fillColor">
                  <g clip-path="url(#clip0)">
                    <path
                      d="M42.7236 40.1889C42.7236 40.1889 26.3165 46.1215 22.2675 47.125C22.2675 46.7905 21.7218 24.8557 21.7218 24.8557C22.0203 24.8085 22.3146 24.7379 22.602 24.6444C24.0279 24.2043 39.7661 20.5779 42.4947 19.9265C42.7236 20.8947 42.7236 40.1889 42.7236 40.1889ZM31.4569 28.6758L31.2809 28.5702V27.3555C31.2851 27.047 31.2238 26.7412 31.1012 26.4581C30.9786 26.175 30.7973 25.9212 30.5695 25.7133C30.3416 25.5053 30.0722 25.3481 29.7791 25.2518C29.486 25.1556 29.1759 25.1226 28.8691 25.155C28.1832 25.2425 27.5551 25.5839 27.1086 26.1119C26.6621 26.6398 26.4297 27.3159 26.4573 28.0068C26.4573 30.2073 26.4573 32.3903 26.5629 34.4852C26.6686 36.1224 26.5629 37.7771 26.6686 39.5376C26.7742 41.298 27.76 42.3894 29.2916 42.1782C29.9013 42.1003 30.461 41.8006 30.8636 41.3362C31.2663 40.8718 31.4838 40.2754 31.4745 39.6608V37.4603C31.4745 36.5801 31.4745 36.4744 32.3547 37.0202C33.7807 37.7947 35.0834 38.6574 36.5093 39.3263C36.9016 39.5133 37.3374 39.59 37.7699 39.5481C38.2025 39.5063 38.6155 39.3475 38.9647 39.0887C39.3139 38.83 39.586 38.4811 39.752 38.0795C39.918 37.6779 39.9716 37.2387 39.9069 36.8089C39.8013 35.7175 38.9211 35.383 38.1465 34.9429L35.189 33.3057C34.5376 32.9712 34.5376 32.5311 35.0834 32.091C35.7347 31.3164 36.5093 30.5594 37.1607 29.7848C37.812 29.0103 38.5866 28.2533 39.1323 27.4787C39.3656 27.1816 39.5185 26.8294 39.5762 26.4561C39.6339 26.0827 39.5946 25.7008 39.462 25.3471C39.3293 24.9934 39.1078 24.6798 38.8189 24.4365C38.5299 24.1932 38.1831 24.0283 37.812 23.9579C37.2847 23.8286 36.7304 23.8638 36.2236 24.059C35.7169 24.2541 35.2821 24.5997 34.9777 25.0493C33.7211 26.1747 32.5447 27.3865 31.4569 28.6758Z"/>
                    <path
                      d="M14.3985 31.9678C14.3985 31.9678 15.7188 31.7565 15.9301 31.422C17.356 29.7848 18.7643 28.2357 20.1903 26.5985C20.6306 25.9505 21.1067 25.3275 21.6162 24.7324C22.0563 24.398 21.9507 24.7324 21.9507 25.1725C21.9507 25.6127 22.1619 44.5371 22.2852 46.8961C21.9507 47.1073 11.7227 38.9918 11.7227 38.9918C11.7227 38.9918 11.0713 30.3306 11.0713 30.1897C11.0713 30.0489 11.8283 30.5242 12.1628 30.6298C12.9197 31.0699 13.6943 31.6157 14.4513 32.0558L14.3985 31.9678ZM15.0498 21.8806C13.9585 21.3124 12.8221 20.8355 11.6522 20.4546C11.3178 20.349 10.8953 20.349 10.772 19.8033C13.2014 19.3632 15.4371 18.9583 17.9017 18.5886C19.8734 18.2541 21.7218 17.814 23.6935 17.6028C23.6935 18.6942 23.9047 19.8033 24.8906 20.2434C25.5759 20.5545 26.3316 20.6777 27.0803 20.6004C27.8289 20.523 28.5435 20.2479 29.1508 19.8033C29.6882 19.4272 30.1142 18.9131 30.3838 18.3151C30.6533 17.7171 30.7565 17.0574 30.6823 16.4057L31.4393 16.3C31.4393 17.5147 31.4393 21.4581 31.3337 22.4439C29.362 22.9896 22.2499 24.6444 22.1443 24.6444C19.9614 23.6586 17.2328 22.7784 15.1027 21.8982L15.0498 21.8806Z" />
                    <path
                      d="M30.5767 16.5114C30.6998 17.1663 30.6189 17.8433 30.345 18.4509C30.0711 19.0585 29.6174 19.5674 29.0452 19.909C28.4603 20.3996 27.7419 20.7037 26.9825 20.7822C26.2232 20.8606 25.4578 20.7098 24.785 20.3491C24.32 20.105 23.9497 19.7127 23.7329 19.2344C23.516 18.756 23.465 18.219 23.5879 17.7084C23.8323 16.8749 24.3134 16.1302 24.9727 15.5646C25.6321 14.999 26.4413 14.6369 27.3024 14.5221C27.8481 14.4165 27.5136 14.1876 27.3024 13.9764C26.3165 12.9905 25.4363 12.0047 24.4681 10.9132C24.0744 10.5362 23.7096 10.1301 23.3766 9.69854C23.2145 9.56069 23.0862 9.38747 23.0015 9.19222C22.9168 8.99696 22.8781 8.78488 22.8883 8.57231C22.8985 8.35973 22.9574 8.15234 23.0603 7.96609C23.1633 7.77984 23.3077 7.61971 23.4823 7.49802C23.8377 7.17794 24.2417 6.91647 24.6793 6.72344C25.8356 6.35427 26.8902 5.72148 27.7601 4.875C27.9319 5.44514 28.0034 6.0408 27.9713 6.63542C27.9713 8.39583 27.5312 8.94156 25.894 9.27604C25.137 9.48729 25.2427 9.71615 25.5595 10.2619C27.0911 11.9167 28.3938 13.6771 29.8198 15.4375C30.132 15.7559 30.3879 16.125 30.5767 16.529V16.5114Z" />
                    <path
                      d="M31.2812 22.4791C31.2812 20.2785 31.3869 17.8668 31.3869 16.3352C32.4783 16.4408 40.0305 18.9758 42.6535 19.7328C42.724 20.0145 33.429 21.9861 31.2812 22.4791Z" />
                    <path
                      d="M16.687 14.4165C16.8983 12.7793 17.1271 11.2301 17.3384 9.69858C17.444 8.48389 17.9897 8.16702 19.2044 8.48389C19.6197 8.58169 20.0217 8.72947 20.4015 8.924C21.0628 9.34054 21.8084 9.6051 22.5844 9.69858C21.0704 11.5646 20.7184 11.6702 18.553 10.5788L17.6728 14.6453C17.5672 15.0855 17.4616 15.6312 17.3384 16.0713C17.2914 16.3656 17.1865 16.6477 17.0298 16.9013C16.873 17.1548 16.6676 17.3747 16.4252 17.5482C16.1829 17.7218 15.9086 17.8456 15.6181 17.9123C15.3276 17.9791 15.0267 17.9876 14.7329 17.9373C14.0937 17.9064 13.4797 17.6782 12.9753 17.2842C12.4709 16.8902 12.101 16.3496 11.9163 15.7368C11.8636 15.4618 11.868 15.1788 11.9292 14.9056C11.9905 14.6323 12.1073 14.3746 12.2724 14.1484C12.4375 13.9222 12.6474 13.7324 12.889 13.5907C13.1305 13.4491 13.3987 13.3587 13.6767 13.325C14.2301 13.2287 14.799 13.2788 15.3271 13.4703C15.8551 13.6617 16.3239 13.9879 16.687 14.4165Z" />
                    <path d="M42.7232 23.9578V19.7856C43.6034 21.106 44.5716 22.4791 45.3638 23.9578H42.7232Z" />
                    <path d="M10.5788 19.7856L4.89264 26.7041L15.2791 32.5135L22.268 24.6268L10.5788 19.7856Z"/>
                  </g>
                  <defs>
                        <clipPath id="clip0">
                        <rect x="4.875" y="4.875" width="42.25" height="42.25" :fill="formData.colorNormal"/>
                        </clipPath>
                        </defs>
                        </svg>
                <span :style="{'font-family': formData.fontfamily}">智行电台</span>
              </div>


            </div>


            <div class="jfm_leftnav03" v-if='jfm_leftnav04'>

              <div class="jt_nav_zt "
                   v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected : '#00C4B4'}">
                <img :src="iconsFlag.ic_my_purchase" class="dotbox" height="32" v-if="iconsFlag.ic_my_purchase"
                     v-on:click="handleImgSelect('icon/png', 'ic_my_purchase','ic_my_purchase_unselected');"
                     width="32"/>
                <svg width="52" height="52" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M41.4334 28.028C41.5114 27.378 41.5634 26.702 41.5634 26C41.5634 25.298 41.5114 24.6219 41.4074 23.9719L45.8014 20.5399C46.1914 20.228 46.2954 19.6559 46.0614 19.214L41.9014 12.012C41.6414 11.544 41.0954 11.388 40.6274 11.544L35.4534 13.624C34.3614 12.792 33.2174 12.116 31.9434 11.596L31.1634 6.08395C31.0854 5.56395 30.6434 5.19995 30.1234 5.19995H21.8034C21.2834 5.19995 20.8674 5.56395 20.7894 6.08395L20.0094 11.596C18.7354 12.116 17.5654 12.818 16.4994 13.624L11.3254 11.544C10.8574 11.362 10.3114 11.544 10.0514 12.012L5.89145 19.214C5.63145 19.6819 5.73545 20.228 6.15145 20.5399L10.5454 23.9719C10.4414 24.6219 10.3634 25.3239 10.3634 26C10.3634 26.676 10.4154 27.378 10.5194 28.028L6.12545 31.4599C5.73545 31.7719 5.63145 32.344 5.86545 32.7859L10.0254 39.9879C10.2854 40.4559 10.8314 40.6119 11.2994 40.4559L16.4734 38.3759C17.5654 39.208 18.7094 39.8839 19.9834 40.4039L20.7634 45.9159C20.8674 46.4359 21.2834 46.7999 21.8034 46.7999H30.1234C30.6434 46.7999 31.0854 46.4359 31.1374 45.9159L31.9174 40.4039C33.1914 39.8839 34.3614 39.1819 35.4274 38.3759L40.6014 40.4559C41.0694 40.6379 41.6154 40.4559 41.8754 39.9879L46.0354 32.7859C46.2954 32.3179 46.1914 31.7719 45.7754 31.4599L41.4334 28.028ZM25.9635 33.8C21.6735 33.8 18.1635 30.29 18.1635 26C18.1635 21.71 21.6735 18.2 25.9635 18.2C30.2535 18.2 33.7635 21.71 33.7635 26C33.7635 30.29 30.2535 33.8 25.9635 33.8Z" :fill="formData.colorSelected"/>
                </svg>
                <span :style="{'font-family': formData.fontfamily}">设置</span>
              </div>



            </div>




            <div class="jt_nav_f "  @click="(editable === false) ? changeIndex($event, '2', '2-2') : '' "
                 style="margin-top:60px;position: absolute;bottom: 95px;left: 0;"
                 :style="{'border-radius':formData.smallCornerSize+'px'}"  v-if='jt_nav_f'>
              <img :src="iconsFlag.ic_search" class="dotbox" height="32" v-if="iconsFlag.ic_search"
                   v-on:click="handleImgSelect('icon/png', 'ic_search');" width="32"/>
              <svg class="dotbox" fill="none" height="32" v-if='!iconsFlag.ic_search'
                   v-on:click="handleImgSelect('icon/png', 'ic_search');" viewBox="0 0 32 32" width="32"
                   xmlns="http://www.w3.org/2000/svg">
                <path :fill="formData.colorNormal"
                      d="M14.3286 6.71429C16.3714 6.71429 18.2286 7.45714 19.7143 8.94286C22.3143 11.5429 22.6857 15.6286 20.4571 18.7857L19.7143 19.7143L18.7857 20.4571C17.4857 21.3857 16 21.9429 14.3286 21.9429C12.2857 21.9429 10.4286 21.2 8.94286 19.7143C5.97143 16.7429 5.97143 11.9143 8.94286 8.94286C10.4286 7.45714 12.2857 6.71429 14.3286 6.71429ZM14.3286 3C11.3571 3 8.57143 4.11429 6.34286 6.34286C1.88571 10.8 1.88571 17.8571 6.34286 22.3143C8.57143 24.5429 11.3571 25.6571 14.3286 25.6571C16.5571 25.6571 18.9714 24.9143 20.8286 23.6143L26.2143 29L28.8143 26.4L23.4286 21.0143C26.5857 16.5571 26.2143 10.4286 22.1286 6.52857C20.0857 4.11429 17.3 3 14.3286 3Z"/>
              </svg>

            </div>

            <div class="jt_nav_f" @click="(editable === false) ? changeIndex($event, '2', '2-4') : '' "
                 style="position: absolute;bottom: 30px;left: 0;"  :style="{'border-radius':formData.smallCornerSize+'px'}" v-if='jt_nav_f'>
              <img :src="iconsFlag.ic_user_center" class="dotbox" height="32" v-if="iconsFlag.ic_user_center"
                   v-on:click="handleImgSelect('icon/png', 'ic_user_center');" width="32"/>
              <svg class="dotbox" fill="none" height="33" v-if='!iconsFlag.ic_user_center'
                   v-on:click="handleImgSelect('icon/png', 'ic_user_center');" viewBox="0 0 32 33" width="32"
                   xmlns="http://www.w3.org/2000/svg">
                <path :fill="formData.colorNormal"
                      d="M26.8564 28.4875H5.08764C4.63764 28.4875 4.18764 28.2625 3.90639 27.925C3.62514 27.5312 3.51264 27.0812 3.62514 26.6312C4.75014 20.8938 9.41889 16.6188 15.0439 16.1688C16.9283 16.1688 18.9673 16.4078 21.0064 17.2375C21.597 17.4766 21.7939 17.6313 22.1314 17.8C25.3939 19.6563 27.6439 22.8625 28.3751 26.6312C28.4876 27.0812 28.3751 27.5312 28.0376 27.925C27.7564 28.2625 27.3064 28.4875 26.8564 28.4875Z"/>
                <path :fill="formData.colorNormal"
                      d="M5.11464 27.5734C4.93182 27.5734 4.76307 27.5031 4.66464 27.3766C4.65057 27.3625 4.65057 27.3484 4.63651 27.3344C4.49589 27.1937 4.48182 26.9547 4.50995 26.8141C5.55057 21.4703 9.92401 17.4625 15.1553 17.0828H15.5771C18.0943 17.0828 20.5131 17.8703 21.6943 18.6156C24.7881 20.4719 26.8553 23.3828 27.5021 26.8141C27.5303 27.0109 27.4881 27.1937 27.3474 27.3766C27.249 27.5031 27.0803 27.5734 26.8974 27.5734H5.11464Z"/>
                <path :fill="formData.colorNormal"
                      d="M15.5793 17.4203C18.0261 17.4203 20.3746 18.1797 21.5136 18.8969H21.5277C24.5371 20.6828 26.534 23.5094 27.1527 26.8562C27.1668 26.9266 27.1668 27.025 27.0543 27.1516C27.0402 27.1797 26.9699 27.2078 26.8855 27.2078H5.11677C5.0324 27.2078 4.96209 27.1797 4.94802 27.1516C4.93396 27.1234 4.90584 27.0953 4.87771 27.0812C4.84959 27.0531 4.82146 26.9687 4.84958 26.8703C5.86208 21.6812 10.0949 17.8 15.1715 17.4203C15.298 17.4344 15.4386 17.4203 15.5793 17.4203ZM15.5793 16.7172C15.4386 16.7172 15.284 16.7172 15.1433 16.7312C9.74333 17.125 5.24334 21.2312 4.17459 26.7437C4.11834 27.025 4.17459 27.3625 4.39959 27.5875C4.56833 27.8125 4.84958 27.925 5.13083 27.925H26.8996C27.1808 27.925 27.4621 27.8125 27.6308 27.5875C27.7996 27.3625 27.9121 27.0812 27.8558 26.7437C27.1808 23.1437 25.0433 20.1906 21.8933 18.3062C20.698 17.5609 18.2511 16.7172 15.5793 16.7172ZM16.0011 16.675C12.4574 16.675 9.5324 13.75 9.5324 10.2062C9.5324 6.66249 12.4574 3.73749 16.0011 3.73749C19.5449 3.73749 22.4699 6.66249 22.4699 10.2062C22.4699 13.75 19.5449 16.675 16.0011 16.675Z"/>
                <path :fill="formData.colorNormal"
                      d="M16 15.7609C12.9344 15.7609 10.4453 13.2719 10.4453 10.2062C10.4453 7.14061 12.9344 4.65155 16 4.65155C19.0656 4.65155 21.5547 7.14061 21.5547 10.2062C21.5547 13.2719 19.0656 15.7609 16 15.7609Z"/>
                <path :fill="formData.colorNormal"
                      d="M16 5.00311C18.8687 5.00311 21.2031 7.33749 21.2031 10.2062C21.2031 13.075 18.8687 15.4094 16 15.4094C13.1312 15.4094 10.7969 13.075 10.7969 10.2062C10.7969 7.33749 13.1312 5.00311 16 5.00311ZM16 4.29999C12.7375 4.29999 10.0938 6.94374 10.0938 10.2062C10.0938 13.4687 12.7375 16.1125 16 16.1125C19.2625 16.1125 21.9062 13.4687 21.9062 10.2062C21.9062 6.94374 19.2625 4.29999 16 4.29999Z"/>
              </svg>

            </div>


          </template>

          <div class="jfm_leftnav_h" v-if='jfm_leftnav_h'></div>
        </div>


        <div v-if="rightarea" class="jzt_r">
          <!-- 主题 & 音频  -->
          <template v-if="voice">

            <div class="jzt_index" v-if='jzt_index'>
              <div class="jzt_index_top" :style="{'border-radius':formData.largeCornerSize+'px'}"  >
                <img :src="getImgUrl('themes/ad.png')" class=""/>
                <span
                  v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal : '#ffffff'}">隐藏</span>
              </div>

              <div class="jzt_index_tab" v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal : '#BEC3CA',
              'background-color': formData && formData.colorDisabled ? formData.colorDisabled : '#BEC3CA'}">
                <span v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected : '#00C4B4', 'border-color': formData && formData.colorSelected ? formData.colorSelected : '#00C4B4','font-family': formData.fontfamily}">全部</span>
                <span :style="{'font-family': formData.fontfamily}">静物</span>
                <span :style="{'font-family': formData.fontfamily}">商务</span>
                <span :style="{'font-family': formData.fontfamily}">时尚</span>
                <span :style="{'font-family': formData.fontfamily}">明星</span>
                <span :style="{'font-family': formData.fontfamily}">卡通</span>
                <span :style="{'font-family': formData.fontfamily}">游戏</span>
                <span :style="{'font-family': formData.fontfamily}">体育</span>
                <span :style="{'font-family': formData.fontfamily}">文艺</span>
              </div>
              <div class="jzt_index_tab2"
                   v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal : '#BEC3CA'}">
                <span
                  v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected : '#00C4B4','font-family': formData.fontfamily}">推荐</span>
                <span  :style="{'font-family': formData.fontfamily}">热门</span>
                <span  :style="{'font-family': formData.fontfamily}">新品</span>
              </div>

              <div class="jzt_index_zt">
                <div class="jzt_index_ztc">
                  <div class="jzt_index_ztbox" @click="(editable === false) ? changeIndex($event, '2', '2-3') : ''"
                       :style="{'border-radius':formData.mediumCornerSize+'px'}" >
                    <img :src="getImgUrl('themes/fm.png')" class=""/>
                    <p  :style="{'font-family': formData.fontfamily}"><span
                      v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal : '#BEC3CA'}">9区</span><em
                      v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected : '#00C4B4'}">￥8</em>
                    </p>
                  </div>
                  <div class="jzt_index_ztbox" @click="(editable === false) ? changeIndex($event, '2', '2-3') : ''"
                       :style="{'border-radius':formData.mediumCornerSize+'px'}">
                    <img :src="getImgUrl('themes/fm2.png')" class=""/>
                    <p  :style="{'font-family': formData.fontfamily}"><span
                      v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal : '#BEC3CA'}">9区</span><em
                      v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected : '#00C4B4'}">￥8</em>
                    </p>
                  </div>
                  <div class="jzt_index_ztbox" @click="(editable === false) ? changeIndex($event, '2', '2-3') : ''"
                       :style="{'border-radius':formData.mediumCornerSize+'px'}">
                    <img :src="getImgUrl('themes/fm3.png')" class=""/>
                    <p  :style="{'font-family': formData.fontfamily}"><span
                      v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal : '#BEC3CA'}">9区</span><em
                      v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected : '#00C4B4'}">￥8</em>
                    </p>
                  </div>
                  <div class="jzt_index_ztbox" @click="(editable === false) ? changeIndex($event, '2', '2-3') : ''"
                       :style="{'border-radius':formData.mediumCornerSize+'px'}">
                    <img :src="getImgUrl('themes/fm4.png')" class=""/>
                    <p  :style="{'font-family': formData.fontfamily}"><span
                      v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal : '#BEC3CA'}">9区</span><em
                      v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected : '#00C4B4'}">￥8</em>
                    </p>
                  </div>
                </div>
              </div>
            </div>


            <div class="jzt_sraech" v-if='jzt_sraech'>
              <div class="jzt_sraech_top"
                   v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal : '#ffffff','border-radius':formData.yj4+'px'}"  >
                <img :src="iconsFlag.ic_text_field_search" class="dotbox" height="32"
                     v-if="iconsFlag.ic_text_field_search"
                     v-on:click="handleImgSelect('icon/png','ic_text_field_search');" width="32"/>
                <svg class="dotbox" fill="none" height="32" v-if="!iconsFlag.ic_text_field_search"
                     v-on:click="handleImgSelect('icon/png','ic_text_field_search');" viewBox="0 0 32 32" width="32"
                     xmlns="http://www.w3.org/2000/svg">
                  <path :fill="formData.colorNormal" clip-rule="evenodd"
                        d="M20.6667 18.6667H19.6133L19.24 18.3067C20.5467 16.7867 21.3333 14.8133 21.3333 12.6667C21.3333 7.88 17.4533 4 12.6667 4C7.88 4 4 7.88 4 12.6667C4 17.4533 7.88 21.3333 12.6667 21.3333C14.8133 21.3333 16.7867 20.5467 18.3067 19.24L18.6667 19.6133V20.6667L25.3333 27.32L27.32 25.3333L20.6667 18.6667ZM12.6667 18.6667C9.34667 18.6667 6.66667 15.9867 6.66667 12.6667C6.66667 9.34667 9.34667 6.66667 12.6667 6.66667C15.9867 6.66667 18.6667 9.34667 18.6667 12.6667C18.6667 15.9867 15.9867 18.6667 12.6667 18.6667Z"
                        fill-rule="evenodd"/>
                </svg>
                <span>搜索关键字</span>
                <em>确定</em>
              </div>

              <div class="jzt_sraech_title"
                   v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal : '#ffffff'}">
                <span>热门搜索</span>
                <img :src="iconsFlag.ic_refresh" class="dotbox" height="32" v-if="iconsFlag.ic_refresh"
                     v-on:click="handleImgSelect('icon/png','ic_refresh');" width="32"/>
                <svg class="dotbox" fill="none" height="32" v-if="!iconsFlag.ic_refresh"
                     v-on:click="handleImgSelect('icon/png','ic_refresh');" viewBox="0 0 32 32" width="32"
                     xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd"
                        d="M25.3331 10.6667L19.9998 16H23.9998C23.9998 20.4133 20.4131 24 15.9998 24C14.6531 24 13.3731 23.6667 12.2664 23.0667L10.3198 25.0133C11.9598 26.0533 13.9064 26.6667 15.9998 26.6667C21.8931 26.6667 26.6664 21.8933 26.6664 16H30.6664L25.3331 10.6667ZM7.99967 16C7.99967 11.5867 11.5863 8 15.9997 8C17.3463 8 18.6263 8.33334 19.733 8.93334L21.6797 6.98667C20.0397 5.94667 18.093 5.33334 15.9997 5.33334C10.1063 5.33334 5.33301 10.1067 5.33301 16H1.33301L6.66634 21.3333L11.9997 16H7.99967Z"
                        :fill="formData.colorNormal"/>
                </svg>
              </div>


              <div class="jzt_sraech_main" v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal : '#ffffff'}">
                <span  :style="{'border-radius':formData.yj5+'px'}">简</span>
                <span :style="{'border-radius':formData.yj5+'px'}">静谧之蓝</span>
                <span :style="{'border-radius':formData.yj5+'px'}">复古新浪潮</span>
                <span :style="{'border-radius':formData.yj5+'px'}">梦幻</span>
                <span :style="{'border-radius':formData.yj5+'px'}">国韵</span>
                <span :style="{'border-radius':formData.yj5+'px'}">孟菲斯风格</span>
              </div>


              <div class="jzt_sraech_title"
                   v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal : '#ffffff'}">
                <span>最近搜索</span>

                <img :src="iconsFlag.ic_delete" class="dotbox" height="32" v-if="iconsFlag.ic_delete"
                     v-on:click="handleImgSelect('icon/png','ic_delete');" width="32"/>
                <svg class="dotbox" fill="none" height="32" v-if="!iconsFlag.ic_delete"
                     v-on:click="handleImgSelect('icon/png','ic_delete');" viewBox="0 0 32 32" width="32"
                     xmlns="http://www.w3.org/2000/svg">
                  <path
                    d="M24.55 11.9V25.7C24.55 26.31 24.3077 26.895 23.8763 27.3263C23.445 27.7577 22.86 28 22.25 28H10.75C10.14 28 9.55499 27.7577 9.12365 27.3263C8.69232 26.895 8.45 26.31 8.45 25.7V11.9H5V9.6H10.75V7.3C10.75 6.69 10.9923 6.10499 11.4237 5.67365C11.855 5.24232 12.44 5 13.05 5H19.95C20.56 5 21.145 5.24232 21.5763 5.67365C22.0077 6.10499 22.25 6.69 22.25 7.3V9.6H28V11.9H24.55ZM19.95 7.3H13.05V9.6H19.95V7.3ZM10.75 11.9V25.7H22.25V11.9H10.75ZM17.65 23.4V14.2H19.95V23.4H17.65ZM13.05 14.2H15.35V23.4H13.05V14.2Z"
                    :fill="formData.colorNormal"/>
                </svg>
              </div>

              <div class="jzt_sraech_main" v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal : '#ffffff'}">
                <span :style="{'border-radius':formData.yj5+'px'}">简</span>
                <span :style="{'border-radius':formData.yj5+'px'}">静谧之蓝</span>
                <span :style="{'border-radius':formData.yj5+'px'}">复古新浪潮</span>
                <span :style="{'border-radius':formData.yj5+'px'}">梦幻</span>
                <span :style="{'border-radius':formData.yj5+'px'}">国韵</span>
                <span :style="{'border-radius':formData.yj5+'px'}">孟菲斯风格</span>
                <span :style="{'border-radius':formData.yj5+'px'}">孟菲斯风格</span>
                <span :style="{'border-radius':formData.yj5+'px'}">孟菲斯风格</span>
              </div>
            </div>


            <div class="jzt_post" v-if='jzt_post'
                 v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal : '#ffffff'}">

              <div class="jzt_post_top"><span>量子次元</span><em
                v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected : '#00C4B4'}">￥8</em>
              </div>

              <div class="jzt_post_main">
                <div class="jzt_post_mainc" :style="{'border-radius':formData.largeCornerSize+'px'}">
                  <p class="">
                    在汽车行驶过程中，基于安全考虑，高校才是交互页面的王道。为增强图标间的识别度，通过颜色和图标区分不同的功能。在升级的时候，主打科技及安全理念。通过光感和较为稳定的六边形元素作为辅助元素，设计出本次的设计主题。
                  </p>
                  <img class="" :src="getImgUrl('themes/xq.png')" :style="{'border-radius':formData.yj6+'px'}"/>
                  <img class="" :src="getImgUrl('themes/xq.png')" :style="{'border-radius':formData.yj6+'px'}"/>
                </div>
              </div>

              <div class="jzt_post_f">
                <div class="jzt_post_f01 ">
                  <img :src="iconsFlag.ic_my_like" class="dotbox" height="32" v-if="iconsFlag.ic_my_like"
                       v-on:click="handleImgSelect('icon/png','ic_my_like','ic_my_like_unselected');" width="32"/>
                  <svg class="dotbox" fill="none" height="32" v-if="!iconsFlag.ic_my_like"
                       v-on:click="handleImgSelect('icon/png','ic_my_like','ic_my_like_unselected');"
                       viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg">
                    <path :fill="formData.colorSelected" clip-rule="evenodd"
                          d="M15.9993 28.4667L14.066 26.7067C7.19935 20.48 2.66602 16.3733 2.66602 11.3333C2.66602 7.22667 5.89268 4 9.99935 4C12.3193 4 14.546 5.08 15.9993 6.78667C17.4527 5.08 19.6793 4 21.9993 4C26.106 4 29.3327 7.22667 29.3327 11.3333C29.3327 16.3733 24.7993 20.48 17.9327 26.72L15.9993 28.4667Z"
                          fill-rule="evenodd"/>
                  </svg>
                </div>
                <div class="jzt_post_f02"
                     v-bind:style="{background: formData && formData.colorSelected ? formData.colorSelected : '#00C4B4', 'color': formData && formData.colorSelected ? formData.colorNormal : '#ffffff','border-radius':formData.smallCornerSize+'px'}"  >
                  购买
                </div>
                <div class="jzt_post_f03">
                  <img :src="iconsFlag.ic_full_screen" class="dotbox" height="32" v-if="iconsFlag.ic_full_screen"
                       v-on:click="handleImgSelect('icon/png','ic_full_screen');" width="32"/>
                  <svg class="dotbox " fill="none" height="32" v-if="!iconsFlag.ic_full_screen"
                       v-on:click="handleImgSelect('icon/png','ic_full_screen');" viewBox="0 0 32 32" width="32"
                       xmlns="http://www.w3.org/2000/svg">
                    <path :fill="formData.colorSelected" clip-rule="evenodd"
                          d="M16.0007 6.66666C9.33398 6.66666 3.64065 10.8133 1.33398 16.6667C3.64065 22.52 9.33398 26.6667 16.0007 26.6667C22.6673 26.6667 28.3606 22.52 30.6673 16.6667C28.3606 10.8133 22.6673 6.66666 16.0007 6.66666ZM16.0007 23.3333C12.3207 23.3333 9.33398 20.3467 9.33398 16.6667C9.33398 12.9867 12.3207 10 16.0007 10C19.6807 10 22.6673 12.9867 22.6673 16.6667C22.6673 20.3467 19.6807 23.3333 16.0007 23.3333ZM16.0007 12.6667C13.7873 12.6667 12.0007 14.4533 12.0007 16.6667C12.0007 18.88 13.7873 20.6667 16.0007 20.6667C18.214 20.6667 20.0007 18.88 20.0007 16.6667C20.0007 14.4533 18.214 12.6667 16.0007 12.6667Z"
                          fill-rule="evenodd"/>
                  </svg>
                </div>
              </div>


            </div>

            <div class="jzt_my" v-if='jzt_my'>
              <div class="jzt_my_top">
                <div class="jt_nav_zt"
                     v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected : '#00C4B4'}">
                  <img :src="iconsFlag.ic_vehicle" class="dotbox" height="32" v-if="iconsFlag.ic_vehicle"
                       v-on:click="handleImgSelect('icon/png','ic_vehicle','ic_vehicle_unselected');" width="32"/>
                  <svg class="dotbox" fill="none" height="32" v-if='!iconsFlag.ic_vehicle'
                       v-on:click="handleImgSelect('icon/png','ic_vehicle','ic_vehicle_unselected');"
                       viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg">
                    <path :fill="formData.colorSelected"
                          d="M29.1175 6H3.24616C2.57076 6 2 6.56759 2 7.30007V23.6999C2 24.4039 2.54222 25 3.24616 25H29.1175C29.7929 25 30.3636 24.4324 30.3636 23.6999V7.2747C30.3605 6.56759 29.7929 6 29.1175 6ZM28.3026 22.9262H4.05157V8.11499H28.274L28.3026 22.9262Z"/>
                    <path :fill="formData.colorSelected"
                          d="M8.07227 12.4178H10.238V14.5836H8.07227V12.4178ZM11.7029 12.4178H13.8687V14.5836H11.7029V12.4178ZM15.2448 12.4178H17.4106V14.5836H15.2448V12.4178ZM18.7074 12.4178H20.8732V14.5836H18.7074V12.4178ZM22.224 12.4178H24.3897V14.5836H22.224V12.4178ZM8.07227 16.0453H10.238V18.2111H8.07227V16.0453ZM11.7029 16.0453H13.8687V18.2111H11.7029V16.0453ZM15.2448 16.0453H17.4106V18.2111H15.2448V16.0453ZM18.7074 16.0453H20.8732V18.2111H18.7074V16.0453ZM22.224 16.0453H24.3897V18.2111H22.224V16.0453Z"/>
                  </svg>
                  <span>中控主题</span>
                </div>

                <div class="jt_nav_zt"
                     v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal : '#ffffff'}">
                  <img :src="iconsFlag.ic_instrument" class="dotbox" height="32" v-if="iconsFlag.ic_instrument"
                       v-on:click="handleImgSelect('icon/png','ic_instrument','ic_instrument_unselected');" width="32"/>
                  <svg class="dotbox" fill="none" height="32" v-if='!iconsFlag.ic_instrument'
                       v-on:click="handleImgSelect('icon/png','ic_instrument','ic_instrument_unselected');"
                       viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg">
                    <g clip-path="url(#clip0)">
                      <path :fill="formData.colorNormal"
                            d="M17.3994 10.4C17.3994 10.7713 17.2519 11.1274 16.9894 11.3899C16.7268 11.6525 16.3707 11.8 15.9994 11.8C15.6281 11.8 15.272 11.6525 15.0095 11.3899C14.7469 11.1274 14.5994 10.7713 14.5994 10.4C14.5994 10.0287 14.7469 9.6726 15.0095 9.41005C15.272 9.1475 15.6281 9 15.9994 9C16.3707 9 16.7268 9.1475 16.9894 9.41005C17.2519 9.6726 17.3994 10.0287 17.3994 10.4Z"/>
                      <path :fill="formData.colorNormal"
                            d="M9 18.8C9 19.1713 8.8525 19.5274 8.58995 19.7899C8.3274 20.0525 7.97131 20.2 7.6 20.2C7.2287 20.2 6.8726 20.0525 6.61005 19.7899C6.3475 19.5274 6.2 19.1713 6.2 18.8C6.2 18.4287 6.3475 18.0726 6.61005 17.81C6.8726 17.5475 7.2287 17.4 7.6 17.4C7.97131 17.4 8.3274 17.5475 8.58995 17.81C8.8525 18.0726 9 18.4287 9 18.8Z"/>
                      <path :fill="formData.colorNormal"
                            d="M25.7998 18.8C25.7998 19.1713 25.6523 19.5274 25.3898 19.7899C25.1272 20.0525 24.7711 20.2 24.3998 20.2C24.0285 20.2 23.6724 20.0525 23.4099 19.7899C23.1473 19.5274 22.9998 19.1713 22.9998 18.8C22.9998 18.4287 23.1473 18.0726 23.4099 17.81C23.6724 17.5475 24.0285 17.4 24.3998 17.4C24.7711 17.4 25.1272 17.5475 25.3898 17.81C25.6523 18.0726 25.7998 18.4287 25.7998 18.8Z"/>
                      <path :fill="formData.colorNormal"
                            d="M22.9294 11.87C23.125 12.0658 23.2582 12.3153 23.3121 12.5868C23.366 12.8583 23.3382 13.1397 23.2321 13.3955C23.1261 13.6512 22.9467 13.8698 22.7165 14.0235C22.4863 14.1773 22.2157 14.2594 21.9389 14.2594C21.662 14.2594 21.3914 14.1773 21.1612 14.0235C20.931 13.8698 20.7516 13.6512 20.6456 13.3955C20.5396 13.1397 20.5118 12.8583 20.5657 12.5868C20.6195 12.3153 20.7527 12.0658 20.9484 11.87C21.0784 11.7398 21.2328 11.6365 21.4028 11.5661C21.5727 11.4956 21.7549 11.4594 21.9389 11.4594C22.1228 11.4594 22.305 11.4956 22.475 11.5661C22.6449 11.6365 22.7993 11.7398 22.9294 11.87ZM9.06936 11.87C9.26522 11.6743 9.51468 11.5411 9.78621 11.4872C10.0577 11.4333 10.3392 11.4612 10.5949 11.5672C10.8506 11.6732 11.0692 11.8526 11.2229 12.0828C11.3767 12.313 11.4588 12.5836 11.4588 12.8605C11.4588 13.1373 11.3767 13.4079 11.2229 13.6381C11.0692 13.8683 10.8506 14.0477 10.5949 14.1537C10.3392 14.2597 10.0577 14.2876 9.78621 14.2337C9.51468 14.1798 9.26522 14.0466 9.06936 13.851C8.9392 13.7209 8.83593 13.5665 8.76548 13.3966C8.69503 13.2266 8.65876 13.0444 8.65876 12.8605C8.65876 12.6765 8.69503 12.4943 8.76548 12.3243C8.83593 12.1544 8.9392 12 9.06936 11.87Z"/>
                      <path :fill="formData.colorNormal"
                            d="M6.10195 8.90199C8.05987 6.94466 10.5542 5.61177 13.2695 5.07183C15.9848 4.53188 18.7993 4.80912 21.3571 5.8685C23.9149 6.92788 26.1012 8.72184 27.6396 11.0236C29.178 13.3253 29.9994 16.0315 29.9999 18.8C30.0081 21.8305 29.0248 24.7805 27.1999 27.2L25.1979 25.198C26.797 22.9006 27.4779 20.0877 27.1065 17.3134C26.735 14.539 25.3382 12.0043 23.1911 10.2085C21.044 8.41268 18.3023 7.48592 15.506 7.61076C12.7097 7.73559 10.0615 8.90298 8.08295 10.883C6.22541 12.7408 5.08006 15.1924 4.84717 17.8092C4.61429 20.426 5.30869 23.0414 6.80895 25.198L4.79995 27.2C2.77855 24.5039 1.79737 21.1692 2.03654 17.808C2.27571 14.4468 3.71916 11.2847 6.10195 8.90199Z"/>
                      <path :fill="formData.colorNormal"
                            d="M17.8204 21.25C18.0989 21.7327 18.1742 22.3062 18.0298 22.8444C17.8854 23.3827 17.5331 23.8415 17.0504 24.12C16.5677 24.3984 15.9941 24.4738 15.4559 24.3294C14.9177 24.185 14.4589 23.8327 14.1804 23.35C13.5994 22.349 12.1504 15.65 12.1504 15.65C12.1504 15.65 17.2394 20.249 17.8204 21.25Z"/>
                    </g>
                    <defs>
                      <clipPath id="clip0">
                        <rect :fill="formData.colorNormal" height="28" transform="matrix(-1 0 0 1 30 2)" width="28"/>
                      </clipPath>
                    </defs>
                  </svg>
                  <span>仪表盘</span>
                </div>

                <div class="jzt_my_sc">
                  <img :src="iconsFlag.ic_themes_delete" class="dotbox" height="32" v-if="iconsFlag.ic_themes_delete"
                       v-on:click="handleImgSelect('icon/png','ic_themes_delete');" width="32"/>
                  <svg class="dotbox" fill="none" height="32" v-if='!iconsFlag.ic_themes_delete'
                       v-on:click="handleImgSelect('icon/png','ic_themes_delete');" viewBox="0 0 32 32" width="32"
                       xmlns="http://www.w3.org/2000/svg">
                    <path :fill="formData.colorSelected"
                          d="M24.55 11.9V25.7C24.55 26.31 24.3077 26.895 23.8763 27.3263C23.445 27.7577 22.86 28 22.25 28H10.75C10.14 28 9.55499 27.7577 9.12365 27.3263C8.69232 26.895 8.45 26.31 8.45 25.7V11.9H5V9.6H10.75V7.3C10.75 6.69 10.9923 6.10499 11.4237 5.67365C11.855 5.24232 12.44 5 13.05 5H19.95C20.56 5 21.145 5.24232 21.5763 5.67365C22.0077 6.10499 22.25 6.69 22.25 7.3V9.6H28V11.9H24.55ZM19.95 7.3H13.05V9.6H19.95V7.3ZM10.75 11.9V25.7H22.25V11.9H10.75ZM17.65 23.4V14.2H19.95V23.4H17.65ZM13.05 14.2H15.35V23.4H13.05V14.2Z"/>
                  </svg>
                </div>

              </div>


              <div class="jzt_my_main">
                <div class="jzt_index_zt">
                  <div class="jzt_index_ztc">
                    <div class="jzt_index_ztbox"  :style="{'border-radius':formData.mediumCornerSize+'px'}">
                      <div class="jzt_my_main_se">
                        <img :src="iconsFlag.ic_select" class="dotbox" height="32" v-if="iconsFlag.ic_select"
                             v-on:click="handleImgSelect('icon/png','ic_select','ic_select_unselected');" width="32"/>
                        <svg class="dotbox" fill="none" height="32" v-if='!iconsFlag.ic_select'
                             v-on:click="handleImgSelect('icon/png','ic_select','ic_select_unselected');"
                             viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg">
                          <path :fill="formData.colorSelected" clip-rule="evenodd"
                                d="M22.1203 10.1067L13.3337 18.8933L8.54699 14.12L6.66699 16L13.3337 22.6667L24.0003 12L22.1203 10.1067ZM16.0003 2.66667C8.64033 2.66667 2.66699 8.64001 2.66699 16C2.66699 23.36 8.64033 29.3333 16.0003 29.3333C23.3603 29.3333 29.3337 23.36 29.3337 16C29.3337 8.64001 23.3603 2.66667 16.0003 2.66667ZM16.0003 26.6667C10.107 26.6667 5.33366 21.8933 5.33366 16C5.33366 10.1067 10.107 5.33334 16.0003 5.33334C21.8937 5.33334 26.667 10.1067 26.667 16C26.667 21.8933 21.8937 26.6667 16.0003 26.6667Z"
                                fill-rule="evenodd"/>
                        </svg>

                      </div>
                      <img :src="getImgUrl('themes/fm.png')" class=""/>
                      <p><span
                        v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal : '#BEC3CA'}">9区</span><em
                        v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected : '#00C4B4'}">￥8</em>
                      </p>
                    </div>
                    <div class="jzt_index_ztbox"  :style="{'border-radius':formData.mediumCornerSize+'px'}">
                      <div class="jzt_my_main_se">
                        <svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg">
                          <path :fill="formData.colorNormal" clip-rule="evenodd"
                                d="M15.9993 2.66666C8.63935 2.66666 2.66602 8.63999 2.66602 16C2.66602 23.36 8.63935 29.3333 15.9993 29.3333C23.3594 29.3333 29.3327 23.36 29.3327 16C29.3327 8.63999 23.3594 2.66666 15.9993 2.66666ZM15.9993 26.6667C10.106 26.6667 5.33268 21.8933 5.33268 16C5.33268 10.1067 10.106 5.33332 15.9993 5.33332C21.8927 5.33332 26.666 10.1067 26.666 16C26.666 21.8933 21.8927 26.6667 15.9993 26.6667Z"
                                fill-rule="evenodd"/>
                        </svg>
                      </div>
                      <img :src="getImgUrl('themes/fm2.png')" class=""/>
                      <p><span
                        v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal : '#BEC3CA'}">9区</span><em
                        v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected : '#00C4B4'}">￥8</em>
                      </p>
                    </div>
                    <div class="jzt_index_ztbox"  :style="{'border-radius':formData.mediumCornerSize+'px'}">
                      <div class="jzt_my_main_se">
                        <svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg">
                          <path :fill="formData.colorNormal" clip-rule="evenodd"
                                d="M15.9993 2.66666C8.63935 2.66666 2.66602 8.63999 2.66602 16C2.66602 23.36 8.63935 29.3333 15.9993 29.3333C23.3594 29.3333 29.3327 23.36 29.3327 16C29.3327 8.63999 23.3594 2.66666 15.9993 2.66666ZM15.9993 26.6667C10.106 26.6667 5.33268 21.8933 5.33268 16C5.33268 10.1067 10.106 5.33332 15.9993 5.33332C21.8927 5.33332 26.666 10.1067 26.666 16C26.666 21.8933 21.8927 26.6667 15.9993 26.6667Z"
                                fill-rule="evenodd"/>
                        </svg>
                      </div>
                      <img :src="getImgUrl('themes/fm3.png')" class=""/>
                      <p><span
                        v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal : '#BEC3CA'}">9区</span><em
                        v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected : '#00C4B4'}">￥8</em>
                      </p>
                    </div>
                    <div class="jzt_index_ztbox"  :style="{'border-radius':formData.mediumCornerSize+'px'}">
                      <div class="jzt_my_main_se">
                        <svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg">
                          <path :fill="formData.colorNormal" clip-rule="evenodd"
                                d="M15.9993 2.66666C8.63935 2.66666 2.66602 8.63999 2.66602 16C2.66602 23.36 8.63935 29.3333 15.9993 29.3333C23.3594 29.3333 29.3327 23.36 29.3327 16C29.3327 8.63999 23.3594 2.66666 15.9993 2.66666ZM15.9993 26.6667C10.106 26.6667 5.33268 21.8933 5.33268 16C5.33268 10.1067 10.106 5.33332 15.9993 5.33332C21.8927 5.33332 26.666 10.1067 26.666 16C26.666 21.8933 21.8927 26.6667 15.9993 26.6667Z"
                                fill-rule="evenodd"/>
                        </svg>
                      </div>
                      <img :src="getImgUrl('themes/fm4.png')" class=""/>
                      <p><span
                        v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal : '#BEC3CA'}">9区</span><em
                        v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected : '#00C4B4'}">￥8</em>
                      </p>
                    </div>
                  </div>
                </div>

                <div class="jzt_index_zt">
                  <div class="jzt_index_ztc">
                    <div class="jzt_index_ztbox"  :style="{'border-radius':formData.mediumCornerSize+'px'}">
                      <div class="jzt_my_main_se">
                        <svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg">
                          <path :fill="formData.colorSelected" clip-rule="evenodd"
                                d="M22.1203 10.1067L13.3337 18.8933L8.54699 14.12L6.66699 16L13.3337 22.6667L24.0003 12L22.1203 10.1067ZM16.0003 2.66667C8.64033 2.66667 2.66699 8.64001 2.66699 16C2.66699 23.36 8.64033 29.3333 16.0003 29.3333C23.3603 29.3333 29.3337 23.36 29.3337 16C29.3337 8.64001 23.3603 2.66667 16.0003 2.66667ZM16.0003 26.6667C10.107 26.6667 5.33366 21.8933 5.33366 16C5.33366 10.1067 10.107 5.33334 16.0003 5.33334C21.8937 5.33334 26.667 10.1067 26.667 16C26.667 21.8933 21.8937 26.6667 16.0003 26.6667Z"
                                fill-rule="evenodd"/>
                        </svg>

                      </div>
                      <img :src="getImgUrl('themes/fm.png')" class=""/>
                      <p><span
                        v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal : '#BEC3CA'}">9区</span><em
                        v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected : '#00C4B4'}">￥8</em>
                      </p>
                    </div>
                    <div class="jzt_index_ztbox"  :style="{'border-radius':formData.mediumCornerSize+'px'}">
                      <div class="jzt_my_main_se">
                        <svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg">
                          <path :fill="formData.colorNormal" clip-rule="evenodd"
                                d="M15.9993 2.66666C8.63935 2.66666 2.66602 8.63999 2.66602 16C2.66602 23.36 8.63935 29.3333 15.9993 29.3333C23.3594 29.3333 29.3327 23.36 29.3327 16C29.3327 8.63999 23.3594 2.66666 15.9993 2.66666ZM15.9993 26.6667C10.106 26.6667 5.33268 21.8933 5.33268 16C5.33268 10.1067 10.106 5.33332 15.9993 5.33332C21.8927 5.33332 26.666 10.1067 26.666 16C26.666 21.8933 21.8927 26.6667 15.9993 26.6667Z"
                                fill-rule="evenodd"/>
                        </svg>
                      </div>
                      <img :src="getImgUrl('themes/fm2.png')" class=""/>
                      <p><span
                        v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal : '#BEC3CA'}">9区</span><em
                        v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected : '#00C4B4'}">￥8</em>
                      </p>
                    </div>
                    <div class="jzt_index_ztbox"  :style="{'border-radius':formData.mediumCornerSize+'px'}">
                      <div class="jzt_my_main_se">
                        <svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg">
                          <path :fill="formData.colorNormal" clip-rule="evenodd"
                                d="M15.9993 2.66666C8.63935 2.66666 2.66602 8.63999 2.66602 16C2.66602 23.36 8.63935 29.3333 15.9993 29.3333C23.3594 29.3333 29.3327 23.36 29.3327 16C29.3327 8.63999 23.3594 2.66666 15.9993 2.66666ZM15.9993 26.6667C10.106 26.6667 5.33268 21.8933 5.33268 16C5.33268 10.1067 10.106 5.33332 15.9993 5.33332C21.8927 5.33332 26.666 10.1067 26.666 16C26.666 21.8933 21.8927 26.6667 15.9993 26.6667Z"
                                fill-rule="evenodd"/>
                        </svg>
                      </div>
                      <img :src="getImgUrl('themes/fm3.png')" class=""/>
                      <p><span
                        v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal : '#BEC3CA'}">9区</span><em
                        v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected : '#00C4B4'}">￥8</em>
                      </p>
                    </div>
                    <div class="jzt_index_ztbox"  :style="{'border-radius':formData.mediumCornerSize+'px'}">
                      <div class="jzt_my_main_se">
                        <svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg">
                          <path :fill="formData.colorNormal" clip-rule="evenodd"
                                d="M15.9993 2.66666C8.63935 2.66666 2.66602 8.63999 2.66602 16C2.66602 23.36 8.63935 29.3333 15.9993 29.3333C23.3594 29.3333 29.3327 23.36 29.3327 16C29.3327 8.63999 23.3594 2.66666 15.9993 2.66666ZM15.9993 26.6667C10.106 26.6667 5.33268 21.8933 5.33268 16C5.33268 10.1067 10.106 5.33332 15.9993 5.33332C21.8927 5.33332 26.666 10.1067 26.666 16C26.666 21.8933 21.8927 26.6667 15.9993 26.6667Z"
                                fill-rule="evenodd"/>
                        </svg>
                      </div>
                      <img :src="getImgUrl('themes/fm4.png')" class=""/>
                      <p><span
                        v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal : '#BEC3CA'}">9区</span><em
                        v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected : '#00C4B4'}">￥8</em>
                      </p>
                    </div>
                  </div>
                </div>


              </div>





            </div>

<!-- 音乐模块 -->
            <div class="jmusci" v-if='jmusci'>

<div class="jmusci_l">
  <div class="jmusci_lt01 ">
    <img :src="iconsFlag.filter" class="dotbox" height="32" v-if="iconsFlag.filter"
         v-on:click="handleImgSelect('icon/png_music','filter');" width="32"/>

    <svg class="dotbox" fill="none"
         height="48" v-if='!iconsFlag.filter' v-on:click="handleImgSelect('icon/png_music', 'filter');"
         viewBox="0 0 48 48" width="48" xmlns="http://www.w3.org/2000/svg">
      <path fill-rule="evenodd" clip-rule="evenodd"
            d="M20.0003 36H28.0003V32H20.0003V36ZM6 12V16H42V12H6ZM12 26H36V22H12V26Z" :fill="formData.colorNormal"/>
    </svg>

  </div>

  <div class="jmusci_lt02">
    <img :src="iconsFlag.usbmedia_ic_search" class="dotbox" height="32" v-if="iconsFlag.usbmedia_ic_search"
         v-on:click="handleImgSelect('icon/png_music','usbmedia_ic_search');" width="32"/>
    <svg class="dotbox" fill="none"
         height="48" v-if="!iconsFlag.usbmedia_ic_search"
         v-on:click="handleImgSelect('icon/png_music','usbmedia_ic_search');" viewBox="0 0 48 48" width="48"
         xmlns="http://www.w3.org/2000/svg">
      <path fill-rule="evenodd" clip-rule="evenodd"
            d="M31 28H29.42L28.86 27.46C30.82 25.18 32 22.22 32 19C32 11.82 26.18 6 19 6C11.82 6 6 11.82 6 19C6 26.18 11.82 32 19 32C22.22 32 25.18 30.82 27.46 28.86L28 29.42V31L38 40.98L40.98 38L31 28ZM18.9997 28C14.0197 28 9.99967 23.98 9.99967 19C9.99967 14.02 14.0197 10 18.9997 10C23.9797 10 27.9997 14.02 27.9997 19C27.9997 23.98 23.9797 28 18.9997 28Z"
            :fill="formData.colorNormal"/>
    </svg>

  </div>

</div>


              <div class="jmusci_rf01">
                <img :src="iconsFlag.ic_collect" class="dotbox" height="32" v-if="iconsFlag.ic_collect"
                     v-on:click="handleImgSelect('icon/png_music','ic_collect');" width="32"/>
                <svg class="dotbox" fill="none" height="32" v-if="!iconsFlag.ic_collect"
                     v-on:click="handleImgSelect('icon/png_music','ic_collect');"
                     viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg">
                  <path :fill="formData.colorSelected" clip-rule="evenodd"
                        d="M15.9993 28.4667L14.066 26.7067C7.19935 20.48 2.66602 16.3733 2.66602 11.3333C2.66602 7.22667 5.89268 4 9.99935 4C12.3193 4 14.546 5.08 15.9993 6.78667C17.4527 5.08 19.6793 4 21.9993 4C26.106 4 29.3327 7.22667 29.3327 11.3333C29.3327 16.3733 24.7993 20.48 17.9327 26.72L15.9993 28.4667Z"
                        fill-rule="evenodd"/>
                </svg>
              </div>



                      <!-- 收音机 -->
                        <div class="jmusci_fm" v-if='jmusci_fm'>
                          <div class="jmusci_fm_top">
                            <span v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected : '#00C4B4'}" >FM</span>
                            <span v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal : '#ffffff'}">AM</span>
                          </div>


                          <div class="jmusci_fm_c">
                            <div class="jmusci_fm_cs">
                              <img :src="iconsFlag.ic_step_up" class="dotbox" height="32" v-if="iconsFlag.ic_step_up"
                                   v-on:click="handleImgSelect('icon/png_music', 'ic_step_up', 'ic_step_up_down');"
                                   width="32"/>
                              <svg class="dotbox" fill="none"
                                   height="48" v-if='!iconsFlag.ic_step_up'
                                   v-on:click="handleImgSelect('icon/png_music', 'ic_step_up', 'ic_step_up_down');"
                                   viewBox="0 0 48 48" width="48" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" clip-rule="evenodd"
                                      d="M38.0002 26H26.0002V38H22.0002V26H10.0002V22H22.0002V10H26.0002V22H38.0002V26Z"
                                      :fill="formData.colorNormal"/>
                              </svg>
                            </div>
                            <div class="jmusci_fm_ct">
<span v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal : '#ffffff'}">108.8</span>
<em v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal : '#BEC3CA'}">MHz</em>
                            </div>

                            <div class="jmusci_fm_cs">

                              <img :src="iconsFlag.ic_step_down" class="dotbox" height="32"
                                   v-if="iconsFlag.ic_step_down"
                                   v-on:click="handleImgSelect('icon/png_music', 'ic_step_down', 'ic_step_down_down');"
                                   width="32"/>
                              <svg class="dotbox" fill="none" height="48" v-if='!iconsFlag.ic_step_down'
                                   v-on:click="handleImgSelect('icon/png_music', 'ic_step_down', 'ic_step_down_down');"
                                   viewBox="0 0 48 48" width="48" xmlns="http://www.w3.org/2000/svg">
                                <path d="M22.5 26.5H38.5V22.5H22.5H10.5V26.5H22.5Z" :fill="formData.colorNormal"/>
                              </svg>

                            </div>
                          </div>

                          <div class="jmusci_fm_f">
                            <img :src="getImgUrl('icon/png_music/ic_bw1.png')" class="dotbox"
                                 v-on:click="handleImgSelect('icon/png_music', 'ic_bw1');"/>


                          </div>



                        </div>



<!-- 电台 -->
                        <div class="jmusci_kl" v-if='jmusci_kl'>
                          <div class="jmusci_kl_top">
                            <p v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal : '#ffffff'}">Here We Are</p>
                            <span v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal : '#BEC3CA'}">华晨宇</span>
                          </div>

                          <div class="jmusci_kl_f">
                            <img v-if="iconsFlag.defaultablumpic" :src="iconsFlag.defaultablumpic" class="dotbox"
                                 v-on:click="handleImgSelect('icon/png_music', 'defaultablumpic');"/>
                            <img v-if="!iconsFlag.defaultablumpic" :src="getImgUrl('icon/png_music/defaultablumpic.png')" class="dotbox"
                                 v-on:click="handleImgSelect('icon/png_music', 'defaultablumpic');"/>
                          </div>

                          <div class="jmusci_kl_a">
                            <span v-bind:style="{ color: formData && formData.colorNormal ? formData.colorNormal : '#ffffff'}">01:18</span>
                            <p><i  v-bind:style="{background: formData && formData.colorSelected ? formData.colorSelected : '#00C4B4'}"></i><b v-bind:style="{background: formData && formData.colorSelected ? formData.colorSelected : '#00C4B4'}"></b></p>
                            <span v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal : '#ffffff'}">05:23</span>
                          </div>

                           <div class="jmusci_kl_bt">

                             <div class="jmusci_kl_ba">
                               <img :src="iconsFlag.ic_seek_down" class="dotbox" height="32"
                                    v-if="iconsFlag.ic_seek_down"
                                    v-on:click="handleImgSelect('icon/png', 'ic_seek_down', 'ic_seek_down_down');"
                                    width="32"/>

                               <svg class="dotbox" fill="none"
                                    height="48" v-if='!iconsFlag.ic_seek_down'
                                    v-on:click="handleImgSelect('icon/png_music', 'ic_seek_down', 'ic_seek_down_down');"
                                    viewBox="0 0 48 48" width="48" xmlns="http://www.w3.org/2000/svg">
                                 <path fill-rule="evenodd" clip-rule="evenodd"
                                       d="M18.4027 23.7509L37.1625 10.1699C37.9804 9.57672 39.1268 10.1592 39.1268 11.1677V38.3298C39.1268 39.3383 37.9804 39.9208 37.1625 39.329L18.4027 25.7466C17.722 25.2543 17.722 24.2432 18.4027 23.7509Z"
                                       :fill="formData.colorNormal"/>
                                 <path fill-rule="evenodd" clip-rule="evenodd"
                                       d="M10.1383 7.5C11.596 7.5 12.7767 8.6876 12.7767 10.1538V39.3462C12.7767 40.8124 11.596 42 10.1383 42C8.68065 42 7.5 40.8124 7.5 39.3462V10.1538C7.5 8.6876 8.68065 7.5 10.1383 7.5Z"
                                       :fill="formData.colorNormal"/>
                               </svg>

                             </div>

                             <div class="jmusci_kl_ba">
                               <img :src="iconsFlag.ic_play" class="dotbox" height="32" v-if="iconsFlag.ic_play"
                                    v-on:click="handleImgSelect('icon/png', 'ic_play', 'ic_play_down');" width="32"/>

                               <svg class="dotbox" fill="none"
                                    height="48" v-if='!iconsFlag.ic_play'
                                    v-on:click="handleImgSelect('icon/png_music', 'ic_play', 'ic_play_down');"
                                    viewBox="0 0 49 48" width="49" xmlns="http://www.w3.org/2000/svg">
                                 <g clip-path="url(#clip0)">
                                   <path fill-rule="evenodd" clip-rule="evenodd"
                                         d="M33.6739 7.5C35.1622 7.5 36.3677 8.6876 36.3677 10.1538V39.3462C36.3677 40.8124 35.1622 42 33.6739 42C32.1855 42 30.98 40.8124 30.98 39.3462V10.1538C30.98 8.6876 32.1855 7.5 33.6739 7.5Z"
                                         :fill="formData.colorNormal"/>
                                   <path fill-rule="evenodd" clip-rule="evenodd"
                                         d="M14.8163 7.5C16.3047 7.5 17.5102 8.6876 17.5102 10.1538V39.3462C17.5102 40.8124 16.3047 42 14.8163 42C13.3279 42 12.1224 40.8124 12.1224 39.3462V10.1538C12.1224 8.6876 13.3279 7.5 14.8163 7.5Z"
                                         :fill="formData.colorNormal"/>
                                 </g>
                                 <defs>
                                   <clipPath id="clip0">
                                     <rect x="12.1224" y="7.5" width="24.2449" height="34.5"
                                           :fill="formData.colorNormal"/>
                                   </clipPath>
                                 </defs>
                               </svg>

                             </div>

                             <div class="jmusci_kl_ba">
                               <img :src="iconsFlag.ic_seek_up" class="dotbox" height="32" v-if="iconsFlag.ic_seek_up"
                                    v-on:click="handleImgSelect('icon/png', 'ic_seek_up', 'ic_seek_up_down');"
                                    width="32"/>

                               <svg class="dotbox" fill="none"
                                    height="48" v-if='!iconsFlag.ic_seek_up'
                                    v-on:click="handleImgSelect('icon/png_music', 'ic_seek_up', 'ic_seek_up_down');"
                                    viewBox="0 0 48 48" width="48" xmlns="http://www.w3.org/2000/svg">
                                 <path fill-rule="evenodd" clip-rule="evenodd"
                                       d="M28.225 24.2491L9.46513 37.8301C8.64725 38.4233 7.5009 37.8408 7.5009 36.8323L7.5009 9.67021C7.5009 8.66175 8.64725 8.07923 9.46513 8.67103L28.225 22.2534C28.9056 22.7457 28.9056 23.7568 28.225 24.2491Z"
                                       :fill="formData.colorNormal"/>
                                 <path fill-rule="evenodd" clip-rule="evenodd"
                                       d="M36.4896 40.5C35.0319 40.5 33.8513 39.3124 33.8513 37.8462L33.8513 8.65384C33.8513 7.18759 35.0319 6 36.4896 6C37.9473 6 39.1279 7.1876 39.1279 8.65384L39.1279 37.8462C39.1279 39.3124 37.9473 40.5 36.4896 40.5Z"
                                       :fill="formData.colorNormal"/>
                               </svg>


                             </div>


                            </div>

                        </div>






            </div>
<!-- 设置模块 -->
            <div class="jset" v-if='jset'>
              <div class="jset_l">
                <div class="jset_lb">
                  <div class="jset_lba">
                    <img :src="iconsFlag.menu_system_arkamys_normal" class="dotbox" height="32"
                         v-if="iconsFlag.menu_system_arkamys_normal"
                         v-on:click="handleImgSelect('icon/png_set', 'menu_system_arkamys_normal', 'menu_system_arkamys_normal_press');"
                         width="32"/>
                    <svg class="dotbox" fill="none"
                         height="52" v-if='!iconsFlag.menu_system_arkamys_normal'
                         v-on:click="handleImgSelect('icon/png_set', 'menu_system_arkamys_normal', 'menu_system_arkamys_normal_press');"
                         viewBox="0 0 53 52" width="53" xmlns="http://www.w3.org/2000/svg">
                      <g clip-path="url(#clip0)">
                        <path fill-rule="evenodd" clip-rule="evenodd"
                              d="M46 21.8292C46 23.4537 44.9572 24.8229 43.5083 25.3374V44.2542C43.5083 44.9419 42.9502 45.5 42.2625 45.5C41.5748 45.5 41.0167 44.9419 41.0167 44.2542V25.3374C39.5678 24.8229 38.525 23.4537 38.525 21.8292C38.525 20.2046 39.5678 18.8354 41.0167 18.3209V9.37083C41.0167 8.68313 41.5748 8.125 42.2625 8.125C42.9502 8.125 43.5083 8.68313 43.5083 9.37083V18.3209C44.9572 18.8354 46 20.2046 46 21.8292ZM28.5583 35.3041V44.2542C28.5583 44.9419 28.0002 45.5 27.3125 45.5C26.6248 45.5 26.0667 44.9419 26.0667 44.2542V35.3041C24.6178 34.7896 23.575 33.4204 23.575 31.7958C23.575 30.1713 24.6178 28.8021 26.0667 28.2876V9.37083C26.0667 8.68313 26.6248 8.125 27.3125 8.125C28.0002 8.125 28.5583 8.68313 28.5583 9.37083V28.2876C30.0072 28.8021 31.05 30.1713 31.05 31.7958C31.05 33.4204 30.0072 34.7896 28.5583 35.3041ZM13.6083 25.3374V44.2542C13.6083 44.9419 13.0502 45.5 12.3625 45.5C11.6748 45.5 11.1167 44.9419 11.1167 44.2542V25.3374C9.66776 24.8229 8.625 23.4537 8.625 21.8292C8.625 20.2046 9.66776 18.8354 11.1167 18.3209V9.37083C11.1167 8.68313 11.6748 8.125 12.3625 8.125C13.0502 8.125 13.6083 8.68313 13.6083 9.37083V18.3209C15.0572 18.8354 16.1 20.2046 16.1 21.8292C16.1 23.4537 15.0572 24.8229 13.6083 25.3374Z"
                              :fill="formData.colorNormal"/>
                      </g>
                      <defs>
                        <clipPath id="clip0">
                          <rect x="8.625" y="8.125" width="37.375" height="37.375" :fill="formData.colorNormal"/>
                        </clipPath>
                      </defs>
                    </svg>
                  </div>
                    <div class="jset_lba" v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal : '#ffffff'}">音效</div>
                </div>

                <div class="jset_lb">
                  <div class="jset_lba">
                    <img :src="iconsFlag.menu_system_camera_press" class="dotbox" height="32"
                         v-if="iconsFlag.menu_system_camera_press"
                         v-on:click="handleImgSelect('icon/png_set', 'menu_system_camera_normal', 'menu_system_camera_press');"
                         width="32"/>
                    <svg class="dotbox" fill="none"
                         height="52" v-if='!iconsFlag.menu_system_camera_press'
                         v-on:click="handleImgSelect('icon/png_set', 'menu_system_camera_normal', 'menu_system_camera_press');"
                         viewBox="0 0 53 52" width="53" xmlns="http://www.w3.org/2000/svg">
                      <g clip-path="url(#clip0)">
                        <path fill-rule="evenodd" clip-rule="evenodd"
                              d="M32.9761 36.1055L37.5039 42.8304C37.5039 44.3053 36.2958 45.5 34.8071 45.5H18.6313C17.1425 45.5 15.9357 44.3053 15.9357 42.8304L20.4623 36.1055C15.4055 33.7683 11.8911 28.6999 11.8911 22.808C11.8911 14.699 18.5306 8.125 26.7192 8.125C34.9091 8.125 41.5472 14.699 41.5472 22.808C41.5472 28.6999 38.0342 33.7683 32.9761 36.1055ZM26.7192 13.4643C21.508 13.4643 17.2835 17.6476 17.2835 22.808C17.2835 27.9685 21.508 32.1518 26.7192 32.1518C31.9303 32.1518 36.1548 27.9685 36.1548 22.808C36.1548 17.6476 31.9303 13.4643 26.7192 13.4643ZM26.7192 28.1473C23.7417 28.1473 21.3281 25.7567 21.3281 22.808C21.3281 19.8594 23.7417 17.4688 26.7192 17.4688C29.6979 17.4688 32.1116 19.8594 32.1116 22.808C32.1116 25.7567 29.6979 28.1473 26.7192 28.1473Z"
                              :fill="formData.colorSelected"/>
                      </g>
                      <defs>
                        <clipPath id="clip0">
                          <rect x="11.875" y="8.125" width="30.875" height="37.375" :fill="formData.colorNormal"/>
                        </clipPath>
                      </defs>
                    </svg>

                  </div>
                    <div class="jset_lba" v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected : '#00C4B4'}">摄像头</div>
                </div>


                <div class="jset_lb">
                  <div class="jset_lba">
                    <img :src="iconsFlag.menu_system_network_normal" class="dotbox" height="32"
                         v-if="iconsFlag.menu_system_network_normal"
                         v-on:click="handleImgSelect('icon/png_set', 'menu_system_network_normal', 'menu_system_network_press');"
                         width="32"/>
                    <svg class="dotbox" fill="none"
                         height="52" v-if='!iconsFlag.menu_system_network_normal'
                         v-on:click="handleImgSelect('icon/png_set', 'menu_system_network_normal', 'menu_system_network_press');"
                         viewBox="0 0 53 52" width="53" xmlns="http://www.w3.org/2000/svg">
                      <g clip-path="url(#clip0)">
                        <path fill-rule="evenodd" clip-rule="evenodd"
                              d="M37.9911 26.8125C37.9911 23.5662 37.6013 20.4361 36.9099 17.4688H43.4799C45.0736 20.2198 46 23.4047 46 26.8125H37.9911ZM34.0574 9.44113C37.5399 10.7866 40.5286 13.1159 42.6362 16.1339H36.5695C35.9301 13.77 35.0812 11.5341 34.0574 9.44113ZM36.5695 37.4911H42.6136C40.5112 40.5064 37.5319 42.8344 34.0587 44.1799C35.0825 42.0882 35.9314 39.8537 36.5695 37.4911ZM28.6473 36.1562V28.1473H36.6029C36.5121 30.9197 36.1677 33.6094 35.5537 36.1562H28.6473ZM28.6473 26.8125V17.4688H35.5537C36.2665 20.4254 36.6562 23.5609 36.6562 26.8125H28.6473ZM28.6473 16.1339V8.20776C29.9061 8.29719 31.1207 8.53212 32.2981 8.85648C33.4981 11.0923 34.4565 13.543 35.1826 16.1339H28.6473ZM27.3125 45.5C25.5906 45.5 23.9327 45.2477 22.351 44.8112C21.1403 42.5634 20.1739 40.098 19.4424 37.4911H27.3125V45.5ZM27.3125 36.1562H19.0713C18.4573 33.6094 18.1129 30.9197 18.0221 28.1473H27.3125V36.1562ZM27.3125 26.8125H17.9688C17.9688 23.5609 18.3585 20.4254 19.0713 17.4688H27.3125V26.8125ZM27.3125 16.1339H19.4424C20.1739 13.5257 21.1416 11.0603 22.3523 8.81243C23.9341 8.37595 25.5919 8.125 27.3125 8.125V16.1339ZM20.601 9.37172C19.5612 11.4847 18.7016 13.7446 18.0555 16.1339H11.9887C14.1071 13.0999 17.0998 10.7239 20.601 9.37172ZM17.7151 17.4688C17.0237 20.4361 16.6339 23.5662 16.6339 26.8125H8.625C8.625 23.4047 9.55137 20.2198 11.1451 17.4688H17.7151ZM20.5997 44.2493C17.1065 42.8971 14.1245 40.5211 12.0114 37.4911H18.0555C18.7016 39.8791 19.5612 42.1376 20.5997 44.2493ZM8.69174 28.1473H16.6873C16.7754 30.9171 17.1185 33.6001 17.7151 36.1562H11.1585C9.77695 33.7683 8.89864 31.0532 8.69174 28.1473ZM35.1826 37.4911C34.4565 40.0806 33.4994 42.5314 32.2994 44.7672C31.1221 45.0915 29.9061 45.3265 28.6473 45.4172V37.4911H35.1826ZM37.9377 28.1473H45.9319C45.7264 31.0532 44.8467 33.7683 43.4665 36.1562H36.9099C37.5065 33.6001 37.8496 30.9171 37.9377 28.1473Z"
                              :fill="formData.colorNormal"/>
                      </g>
                      <defs>
                        <clipPath id="clip0">
                          <rect x="8.625" y="8.125" width="37.375" height="37.375" :fill="formData.colorNormal"/>
                        </clipPath>
                      </defs>
                    </svg>

                  </div>
                    <div class="jset_lba" v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal : '#ffffff'}">网络</div>
                </div>


                <div class="jset_lb">
                  <div class="jset_lba">
                    <img :src="iconsFlag.menu_system_bt_normal" class="dotbox" height="32"
                         v-if="iconsFlag.menu_system_bt_normal"
                         v-on:click="handleImgSelect('icon/png_set', 'menu_system_bt_normal', 'menu_system_bt_press');"
                         width="32"/>
                    <svg class="dotbox" fill="none"
                         height="52" v-if='!iconsFlag.menu_system_bt_normal'
                         v-on:click="handleImgSelect('icon/png_set', 'menu_system_bt_normal', 'menu_system_bt_press');"
                         viewBox="0 0 53 52" width="53" xmlns="http://www.w3.org/2000/svg">
                      <g clip-path="url(#clip0)">
                        <path fill-rule="evenodd" clip-rule="evenodd"
                              d="M27.3156 45.5094C16.9867 45.5094 8.61475 37.1401 8.61475 26.8153C8.61475 16.4918 16.9867 8.12109 27.3156 8.12109C37.6431 8.12109 46.0151 16.4918 46.0151 26.8153C46.0151 37.1401 37.6431 45.5094 27.3156 45.5094ZM28.1031 26.7886L34.9828 22.1541C35.2925 21.9458 35.478 21.5961 35.478 21.2224C35.478 20.8486 35.2925 20.4989 34.9828 20.2907L26.6789 14.6964C26.3345 14.4642 25.89 14.4415 25.5229 14.6364C25.1559 14.8312 24.6433 15.7176 24.6433 16.134V24.143L19.902 21.3278L18.6486 23.1926L24.6433 26.8126L18.6286 30.7049L19.922 32.5417L24.6433 29.4822V37.4912C24.6433 37.9076 25.1559 38.7993 25.5229 38.9942C25.6884 39.0823 25.87 39.1263 26.0515 39.1263C26.2704 39.1263 26.4907 39.0609 26.6789 38.9355L34.9828 33.3399C35.2925 33.1316 35.478 32.7833 35.478 32.4095C35.478 32.0344 35.2925 31.686 34.9828 31.4778L28.0631 26.8153L28.1031 26.7886ZM27.1754 28.9283L32.3425 32.4095L27.3129 36.1564L27.1754 28.9283ZM27.3129 17.4688L32.3425 21.2224L27.3129 24.143V17.4688Z"
                              :fill="formData.colorNormal"/>
                      </g>
                      <defs>
                        <clipPath id="clip0">
                          <rect x="8.625" y="8.125" width="37.375" height="37.375" :fill="formData.colorNormal"/>
                        </clipPath>
                      </defs>
                    </svg>

                  </div>
                    <div class="jset_lba" v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal : '#ffffff'}">蓝牙</div>
                </div>


                <div class="jset_lb">
                  <div class="jset_lba">
                    <img :src="iconsFlag.menu_system_time_normal" class="dotbox" height="32"
                         v-if="iconsFlag.menu_system_time_normal"
                         v-on:click="handleImgSelect('icon/png_set', 'menu_system_time_normal', 'menu_system_time_press');"
                         width="32"/>
                    <svg class="dotbox" fill="none"
                         height="52" v-if='!iconsFlag.menu_system_time_normal'
                         v-on:click="handleImgSelect('icon/png_set', 'menu_system_time_normal', 'menu_system_time_press');"
                         viewBox="0 0 53 52" width="53" xmlns="http://www.w3.org/2000/svg">
                      <path fill-rule="evenodd" clip-rule="evenodd"
                            d="M27.3125 45.5C16.9917 45.5 8.625 37.1333 8.625 26.8125C8.625 16.4917 16.9917 8.125 27.3125 8.125C37.6333 8.125 46 16.4917 46 26.8125C46 37.1333 37.6333 45.5 27.3125 45.5ZM27.3125 10.7946C18.4666 10.7946 11.2946 17.9666 11.2946 26.8125C11.2946 35.6584 18.4666 42.8304 27.3125 42.8304C36.1584 42.8304 43.3304 35.6584 43.3304 26.8125C43.3304 17.9666 36.1584 10.7946 27.3125 10.7946Z"
                            :fill="formData.colorNormal"/>
                      <path fill-rule="evenodd" clip-rule="evenodd"
                            d="M27.3121 40.1608C19.9399 40.1608 13.9639 34.1848 13.9639 26.8126C13.9639 19.4404 19.9399 13.4644 27.3121 13.4644C34.6843 13.4644 40.6603 19.4404 40.6603 26.8126C40.6603 34.1848 34.6843 40.1608 27.3121 40.1608ZM35.321 25.4777H29.9817C29.8629 25.4777 29.7561 25.5165 29.6467 25.5458C29.4104 25.1187 29.0687 24.7583 28.6469 24.5127V17.4688C28.6469 16.732 28.0489 16.134 27.3121 16.134C26.5753 16.134 25.9773 16.732 25.9773 17.4688V24.5127C25.183 24.9759 24.6424 25.8275 24.6424 26.8126C24.6424 28.2875 25.8371 29.4822 27.3121 29.4822C28.3252 29.4822 29.1955 28.9109 29.648 28.0807C29.7575 28.1087 29.8629 28.1474 29.9817 28.1474H35.321C36.0578 28.1474 36.6558 27.5494 36.6558 26.8126C36.6558 26.0757 36.0578 25.4777 35.321 25.4777Z"
                            :fill="formData.colorNormal"/>
                    </svg>

                  </div>
                  <div class="jset_lba"
                       v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal : '#ffffff'}">时间
                  </div>
                </div>


                <div class="jset_lb">
                  <div class="jset_lba">
                    <img :src="iconsFlag.menu_system_voice_normal" class="dotbox" height="32"
                         v-if="iconsFlag.menu_system_voice_normal"
                         v-on:click="handleImgSelect('icon/png_set', 'menu_system_voice_normal', 'menu_system_voice_press');"
                         width="32"/>
                    <svg class="dotbox" fill="none"
                         height="52" v-if='!iconsFlag.menu_system_voice_normal'
                         v-on:click="handleImgSelect('icon/png_set', 'menu_system_voice_normal', 'menu_system_voice_press');"
                         viewBox="0 0 53 52" width="53" xmlns="http://www.w3.org/2000/svg">
                      <g clip-path="url(#clip0)">
                        <path fill-rule="evenodd" clip-rule="evenodd"
                              d="M28.6401 37.4391V42.5688H30.8919V45.5001H23.3835V42.5688H25.6367V37.4391C19.6073 37.2776 15.125 31.7915 15.125 25.7127V24.2471H18.1283V25.7127C18.1283 30.2911 21.0663 34.5078 25.6367 34.5078H28.6401C33.2105 34.5078 36.1484 30.2911 36.1484 25.7127V24.2471H39.1518L39.069 25.8889C39.069 31.9663 34.6708 37.2776 28.6401 37.4391Z"
                              :fill="formData.colorNormal"/>
                        <path fill-rule="evenodd" clip-rule="evenodd"
                              d="M27.1386 8.125C30.4556 8.125 32.4779 10.1473 32.4779 13.4643V25.4777C32.4779 28.7947 30.4556 30.817 27.1386 30.817C23.8216 30.817 21.7993 28.7947 21.7993 25.4777V13.4643C21.7993 10.1473 23.8216 8.125 27.1386 8.125Z"
                              :fill="formData.colorNormal"/>
                        <path fill-rule="evenodd" clip-rule="evenodd"
                              d="M23.3848 42.5793C24.2138 42.5793 24.8852 43.2334 24.8852 44.0396C24.8852 44.8459 24.2138 45.4999 23.3848 45.4999C22.5546 45.4999 21.8818 44.8459 21.8818 44.0396C21.8818 43.2334 22.5546 42.5793 23.3848 42.5793Z"
                              :fill="formData.colorNormal"/>
                        <path fill-rule="evenodd" clip-rule="evenodd"
                              d="M30.8936 42.5793C31.7226 42.5793 32.394 43.2334 32.394 44.0396C32.394 44.8459 31.7226 45.4999 30.8936 45.4999C30.0634 45.4999 29.3906 44.8459 29.3906 44.0396C29.3906 43.2334 30.0634 42.5793 30.8936 42.5793Z"
                              :fill="formData.colorNormal"/>
                        <path fill-rule="evenodd" clip-rule="evenodd"
                              d="M16.6267 22.7666C17.4556 22.7666 18.1283 23.4287 18.1283 24.2469C18.1283 25.0652 17.4556 25.7272 16.6267 25.7272C15.7977 25.7272 15.125 25.0652 15.125 24.2469C15.125 23.4287 15.7977 22.7666 16.6267 22.7666Z"
                              :fill="formData.colorNormal"/>
                        <path fill-rule="evenodd" clip-rule="evenodd"
                              d="M37.6501 22.7666C38.479 22.7666 39.1518 23.4287 39.1518 24.2469C39.1518 25.0652 38.479 25.7272 37.6501 25.7272C36.8212 25.7272 36.1484 25.0652 36.1484 24.2469C36.1484 23.4287 36.8212 22.7666 37.6501 22.7666Z"
                              :fill="formData.colorNormal"/>
                      </g>
                      <defs>
                        <clipPath id="clip0">
<rect x="15.125" y="8.125" width="24.0268" height="37.375" :fill="formData.colorNormal" />
</clipPath>
</defs>
</svg>

                    </div>
                    <div class="jset_lba" v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal : '#ffffff'}">语音</div>
                </div>


                <div class="jset_lb">
                  <div class="jset_lba">
                    <img :src="iconsFlag.menu_system_other_normal" class="dotbox" height="32"
                         v-if="iconsFlag.menu_system_other_normal"
                         v-on:click="handleImgSelect('icon/png_set', 'menu_system_other_normal', 'menu_system_other_press');"
                         width="32"/>
                    <svg class="dotbox" fill="none"
                         height="52" v-if='!iconsFlag.menu_system_other_normal'
                         v-on:click="handleImgSelect('icon/png_set', 'menu_system_other_normal', 'menu_system_other_press');"
                         viewBox="0 0 53 52" width="53" xmlns="http://www.w3.org/2000/svg">
                      <path fill-rule="evenodd" clip-rule="evenodd"
                            d="M27.3125 45.5C16.9917 45.5 8.625 37.1333 8.625 26.8125C8.625 16.4917 16.9917 8.125 27.3125 8.125C37.6333 8.125 46 16.4917 46 26.8125C46 37.1333 37.6333 45.5 27.3125 45.5ZM17.9688 24.1429C16.4938 24.1429 15.2991 25.3375 15.2991 26.8125C15.2991 28.2875 16.4938 29.4821 17.9688 29.4821C19.4437 29.4821 20.6384 28.2875 20.6384 26.8125C20.6384 25.3375 19.4437 24.1429 17.9688 24.1429ZM27.3125 24.1429C25.8375 24.1429 24.6429 25.3375 24.6429 26.8125C24.6429 28.2875 25.8375 29.4821 27.3125 29.4821C28.7875 29.4821 29.9821 28.2875 29.9821 26.8125C29.9821 25.3375 28.7875 24.1429 27.3125 24.1429ZM36.6562 24.1429C35.1813 24.1429 33.9866 25.3375 33.9866 26.8125C33.9866 28.2875 35.1813 29.4821 36.6562 29.4821C38.1312 29.4821 39.3259 28.2875 39.3259 26.8125C39.3259 25.3375 38.1312 24.1429 36.6562 24.1429Z"
                            :fill="formData.colorNormal"/>
                    </svg>

                  </div>
                  <div class="jset_lba"
                       v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal : '#ffffff'}">其他
                  </div>
                </div>


              </div>
               <div class="jset_f">
                  <div class="jset_fb">
                  <span  v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal : '#ffffff'}">限速识别</span>
                  <p><i v-bind:style="{background: formData && formData.colorSelected ? formData.colorSelected : '#00C4B4'}"></i><b v-bind:style="{background: formData && formData.colorSelected ? formData.colorSelected : '#00C4B4'}"></b></p>
                  </div>

                  <div class="jset_fb">
                  <span  v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal : '#ffffff'}">车道保持</span>
                  <p><i v-bind:style="{background: formData && formData.colorSelected ? formData.colorSelected : '#00C4B4'}"></i><b v-bind:style="{background: formData && formData.colorSelected ? formData.colorSelected : '#00C4B4'}"></b></p>
                  </div>

                  <div class="jset_fb">
                  <span  v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal : '#ffffff'}">碰撞提醒</span>
                  <p><i v-bind:style="{background: formData && formData.colorSelected ? formData.colorSelected : '#00C4B4'}"></i><b v-bind:style="{background: formData && formData.colorSelected ? formData.colorSelected : '#00C4B4'}"></b></p>
                  </div>

                  <div class="jset_fb">
                  <span  v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal : '#ffffff'}">360全景摄像头影像</span>
                  <p><i v-bind:style="{background: formData && formData.colorSelected ? formData.colorSelected : '#00C4B4'}"></i><b v-bind:style="{background: formData && formData.colorSelected ? formData.colorSelected : '#00C4B4'}"></b></p>
                  </div>

                  <div class="jset_fb">
                  <span  v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal : '#ffffff'}">移动物体探测预警（MOD）</span>
                  <p><i v-bind:style="{background: formData && formData.colorSelected ? formData.colorSelected : '#00C4B4'}"></i><b v-bind:style="{background: formData && formData.colorSelected ? formData.colorSelected : '#00C4B4'}"></b></p>
                  </div>
                </div>

            </div>


          </template>
          <!-- 音频 /-->





          <!-- 服务 -->
          <template v-if="service">
            <el-menu default-active="activeIndex2" class="el-menu-horizontal" mode="horizontal" @select="handleServiceSelect">
              <el-menu-item v-for="(item,index) in serviceMenu" :key="index" index='index' class="dotbox" v-bind:style="{color: index == activeIndex ? (formData && formData.colorSelected ? formData.colorSelected : '#fff') : (formData && formData.colorNormal ? formData.colorNormal : '#ffffff')}">{{item}}<div class="bg-box" v-bind:style="{backgroundImage: iconsFlag.title_select ? getBgImgUrl_(iconsFlag.title_select) : getBgImgUrl('voice/title_select.png')}"></div></el-menu-item>
            </el-menu>
            <div class="service sroller">
              <dl v-if="activeIndex2 == 0">
                <dt>
                  <img v-if='!iconsFlag.bg_car' class="dotbox" v-on:click="handleImgSelect('service', 'bg_car')" :src = "getImgUrl('service/bg_car.png')" />
                  <img v-if='iconsFlag.bg_car' class="dotbox" v-on:click="handleImgSelect('service', 'bg_car')" :src = "iconsFlag.bg_car" />
                  <div class="aui-flex-row"><span v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected : '#fff'}">车辆</span><span style="color: #747473; font-size: 16px;">CAR</span></div>
                </dt>
                <dd>
                  <img :src = "getImgUrl('service/bg_nearby_oil.png')" />
                  <div v-on:click="handleImgSelect('voice', 'bg_service_tv')" class="dotbox aui-flex aui-flex-center aui-flex-middle">
                    <span v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected : '#fff'}">附近加油站</span>
                    <div class="bg-box" v-bind:style="{backgroundImage: iconsFlag.bg_service_tv ? getBgImgUrl_(iconsFlag.bg_service_tv) : getBgImgUrl('voice/bg_service_tv.png')}"></div>
                  </div>
                </dd>
                <dd>
                  <img :src = "getImgUrl('service/bg_nearby_park.png')" />
                  <div v-on:click="handleImgSelect('voice', 'bg_service_tv')" class="dotbox aui-flex aui-flex-center aui-flex-middle">
                    <span v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected : '#fff'}">附近停车场</span>
                    <div class="bg-box" v-bind:style="{backgroundImage: iconsFlag.bg_service_tv ? getBgImgUrl_(iconsFlag.bg_service_tv) : getBgImgUrl('voice/bg_service_tv.png')}"></div>
                  </div>
                </dd>
                <dd>
                  <img :src = "getImgUrl('service/bg_car_keep.png')" />
                  <div v-on:click="handleImgSelect('voice', 'bg_service_tv')" class="dotbox aui-flex aui-flex-center aui-flex-middle">
                    <span v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected : '#fff'}">未达到保养期</span>
                    <div class="bg-box" v-bind:style="{backgroundImage: iconsFlag.bg_service_tv ? getBgImgUrl_(iconsFlag.bg_service_tv) : getBgImgUrl('voice/bg_service_tv.png')}"></div>
                  </div>
                </dd>
              </dl>
              <dl v-if="activeIndex2 == 1">
                <dt>
                  <img v-if='!iconsFlag.bg_food' class="dotbox" v-on:click="handleImgSelect('service', 'bg_food')" :src = "getImgUrl('service/bg_food.png')" />
                  <img v-if='iconsFlag.bg_food' class="dotbox" v-on:click="handleImgSelect('service', 'bg_food')" :src = "iconsFlag.bg_food" />
                  <div class="aui-flex-row"><span v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected : '#fff'}">美食</span><span style="color: #747473; font-size: 16px;">FOOD</span></div>
                </dt>
                <dd>
                  <img :src = "getImgUrl('service/bg_nearby_oil.png')" />
                  <div v-on:click="handleImgSelect('voice', 'bg_service_tv')" class="dotbox aui-flex aui-flex-center aui-flex-middle">
                    <span v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected : '#fff'}">附近美食</span>
                    <div class="bg-box" v-bind:style="{backgroundImage: iconsFlag.bg_service_tv ? getBgImgUrl_(iconsFlag.bg_service_tv) : getBgImgUrl('voice/bg_service_tv.png')}"></div>
                  </div>
                </dd>
                <dd>
                  <img :src = "getImgUrl('service/bg_nearby_park.png')" />
                  <div v-on:click="handleImgSelect('voice', 'bg_service_tv')" class="dotbox aui-flex aui-flex-center aui-flex-middle">
                    <span v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected : '#fff'}">美食分类</span>
                    <div class="bg-box" v-bind:style="{backgroundImage: iconsFlag.bg_service_tv ? getBgImgUrl_(iconsFlag.bg_service_tv) : getBgImgUrl('voice/bg_service_tv.png')}"></div>
                  </div>
                </dd>
                <dd>
                  <img :src = "getImgUrl('service/bg_car_keep.png')" />
                  <div v-on:click="handleImgSelect('voice', 'bg_service_tv')" class="dotbox aui-flex aui-flex-center aui-flex-middle">
                    <span v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected : '#fff'}">我的收藏</span>
                    <div class="bg-box" v-bind:style="{backgroundImage: iconsFlag.bg_service_tv ? getBgImgUrl_(iconsFlag.bg_service_tv) : getBgImgUrl('voice/bg_service_tv.png')}"></div>
                  </div>
                </dd>
              </dl>
              <dl v-if="activeIndex2 == 2">
                <dt>
                  <img v-if='!iconsFlag.bg_movie' class="dotbox" v-on:click="handleImgSelect('service', 'bg_movie')" :src = "getImgUrl('service/bg_movie.png')" />
                  <img v-if='iconsFlag.bg_movie' class="dotbox" v-on:click="handleImgSelect('service', 'bg_movie')" :src = "iconsFlag.bg_movie" />
                  <div class="aui-flex-row"><span v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected : '#fff'}">电影</span><span style="color: #747473; font-size: 16px;">MOVIE</span></div>
                </dt>
                <dd>
                  <img :src = "getImgUrl('service/bg_nearby_oil.png')" />
                  <div v-on:click="handleImgSelect('voice', 'bg_service_tv')" class="dotbox aui-flex aui-flex-center aui-flex-middle">
                    <span v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected : '#fff'}">附近影院</span>
                    <div class="bg-box" v-bind:style="{backgroundImage: iconsFlag.bg_service_tv ? getBgImgUrl_(iconsFlag.bg_service_tv) : getBgImgUrl('voice/bg_service_tv.png')}"></div>
                  </div>
                </dd>
                <dd>
                  <img :src = "getImgUrl('service/bg_nearby_park.png')" />
                  <div v-on:click="handleImgSelect('voice', 'bg_service_tv')" class="dotbox aui-flex aui-flex-center aui-flex-middle">
                    <span v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected : '#fff'}">热门影片</span>
                    <div class="bg-box" v-bind:style="{backgroundImage: iconsFlag.bg_service_tv ? getBgImgUrl_(iconsFlag.bg_service_tv) : getBgImgUrl('voice/bg_service_tv.png')}"></div>
                  </div>
                </dd>
                <dd>
                  <img :src = "getImgUrl('service/bg_car_keep.png')" />
                  <div v-on:click="handleImgSelect('voice', 'bg_service_tv')" class="dotbox aui-flex aui-flex-center aui-flex-middle">
                    <span v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected : '#fff'}">我的订单</span>
                    <div class="bg-box" v-bind:style="{backgroundImage: iconsFlag.bg_service_tv ? getBgImgUrl_(iconsFlag.bg_service_tv) : getBgImgUrl('voice/bg_service_tv.png')}"></div>
                  </div>
                </dd>
                <dd>
                  <img :src = "getImgUrl('service/bg_car_keep.png')" />
                  <div v-on:click="handleImgSelect('voice', 'bg_service_tv')" class="dotbox aui-flex aui-flex-center aui-flex-middle">
                    <span v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected : '#fff'}">我的收藏</span>
                    <div class="bg-box" v-bind:style="{backgroundImage: iconsFlag.bg_service_tv ? getBgImgUrl_(iconsFlag.bg_service_tv) : getBgImgUrl('voice/bg_service_tv.png')}"></div>
                  </div>
                </dd>
              </dl>
              <dl v-if="activeIndex2 == 3">
                <dt>
                  <img v-if='!iconsFlag.bg_hotel' class="dotbox" v-on:click="handleImgSelect('service', 'bg_hotel')" :src = "getImgUrl('service/bg_hotel.png')" />
                  <img v-if='iconsFlag.bg_hotel' class="dotbox" v-on:click="handleImgSelect('service', 'bg_hotel')" :src = "iconsFlag.bg_hotel" />
                  <div class="aui-flex-row"><span v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected : '#fff'}">酒店</span><span style="color: #747473; font-size: 16px;">HOTEL</span></div>
                </dt>
                <dd>
                  <img :src = "getImgUrl('service/bg_nearby_oil.png')" />
                  <div v-on:click="handleImgSelect('voice', 'bg_service_tv')" class="dotbox aui-flex aui-flex-center aui-flex-middle">
                    <span v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected : '#fff'}">附近酒店</span>
                    <div class="bg-box" v-bind:style="{backgroundImage: iconsFlag.bg_service_tv ? getBgImgUrl_(iconsFlag.bg_service_tv) : getBgImgUrl('voice/bg_service_tv.png')}"></div>
                  </div>
                </dd>
                <dd>
                  <img :src = "getImgUrl('service/bg_nearby_park.png')" />
                  <div v-on:click="handleImgSelect('voice', 'bg_service_tv')" class="dotbox aui-flex aui-flex-center aui-flex-middle">
                    <span v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected : '#fff'}">酒店分类</span>
                    <div class="bg-box" v-bind:style="{backgroundImage: iconsFlag.bg_service_tv ? getBgImgUrl_(iconsFlag.bg_service_tv) : getBgImgUrl('voice/bg_service_tv.png')}"></div>
                  </div>
                </dd>
                <dd>
                  <img :src = "getImgUrl('service/bg_car_keep.png')" />
                  <div v-on:click="handleImgSelect('voice', 'bg_service_tv')" class="dotbox aui-flex aui-flex-center aui-flex-middle">
                    <span v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected : '#fff'}">我的订单</span>
                    <div class="bg-box" v-bind:style="{backgroundImage: iconsFlag.bg_service_tv ? getBgImgUrl_(iconsFlag.bg_service_tv) : getBgImgUrl('voice/bg_service_tv.png')}"></div>
                  </div>
                </dd>
                <dd>
                  <img :src = "getImgUrl('service/bg_car_keep.png')" />
                  <div v-on:click="handleImgSelect('voice', 'bg_service_tv')" class="dotbox aui-flex aui-flex-center aui-flex-middle">
                    <span v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected : '#fff'}">我的收藏</span>
                    <div class="bg-box" v-bind:style="{backgroundImage: iconsFlag.bg_service_tv ? getBgImgUrl_(iconsFlag.bg_service_tv) : getBgImgUrl('voice/bg_service_tv.png')}"></div>
                  </div>
                </dd>
              </dl>
              <dl v-if="activeIndex2 == 4">
                <dt>
                  <img v-if='!iconsFlag.bg_scenic' class="dotbox" v-on:click="handleImgSelect('service', 'bg_scenic')" :src = "getImgUrl('service/bg_scenic.png')" />
                  <img v-if='iconsFlag.bg_scenic' class="dotbox" v-on:click="handleImgSelect('service', 'bg_scenic')" :src = "iconsFlag.bg_scenic" />
                  <div class="aui-flex-row"><span v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected : '#fff'}">景点</span><span style="color: #747473; font-size: 16px;">ATTRACTIONS</span></div>
                </dt>
                <dd>
                  <img :src = "getImgUrl('service/bg_nearby_oil.png')" />
                  <div v-on:click="handleImgSelect('voice', 'bg_service_tv')" class="dotbox aui-flex aui-flex-center aui-flex-middle">
                    <span v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected : '#fff'}">附近景点</span>
                    <div class="bg-box" v-bind:style="{backgroundImage: iconsFlag.bg_service_tv ? getBgImgUrl_(iconsFlag.bg_service_tv) : getBgImgUrl('voice/bg_service_tv.png')}"></div>
                  </div>
                </dd>
                <dd>
                  <img :src = "getImgUrl('service/bg_nearby_park.png')" />
                  <div v-on:click="handleImgSelect('voice', 'bg_service_tv')" class="dotbox aui-flex aui-flex-center aui-flex-middle">
                    <span v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected : '#fff'}">景点分类</span>
                    <div class="bg-box" v-bind:style="{backgroundImage: iconsFlag.bg_service_tv ? getBgImgUrl_(iconsFlag.bg_service_tv) : getBgImgUrl('voice/bg_service_tv.png')}"></div>
                  </div>
                </dd>
                <dd>
                  <img :src = "getImgUrl('service/bg_car_keep.png')" />
                  <div v-on:click="handleImgSelect('voice', 'bg_service_tv')" class="dotbox aui-flex aui-flex-center aui-flex-middle">
                    <span v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected : '#fff'}">我的收藏</span>
                    <div class="bg-box" v-bind:style="{backgroundImage: iconsFlag.bg_service_tv ? getBgImgUrl_(iconsFlag.bg_service_tv) : getBgImgUrl('voice/bg_service_tv.png')}"></div>
                  </div>
                </dd>
              </dl>
            </div>
          </template>
          <!-- 服务 /-->

          <!-- 应用中心 -->
          <template v-if="app">
            <div class="avator aui-flex-col aui-flex-middle">
              <div class="dotbox" v-on:click="handleImgSelect('app', 'iv_cover_bg')">
                <div class="bg-box" v-bind:style="{backgroundImage: iconsFlag.iv_cover_bg ? getBgImgUrl_(iconsFlag.iv_cover_bg) : getBgImgUrl('app/iv_cover_bg.png')}"></div>
              </div>
              <span v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected : '#fff'}" class="f-18">用户名</span>
            </div>
            <div class="sroller" ref="scroller" v-if="!editable" v-bind:style="styleObject4">
              <ul class="app aui-flex-col" ref="scrollercont" style="width: 3950px;height:187px;">
                <li class="aui-flex-row aui-flex-center">
                  <div class="dotbox" v-on:click="handleImgSelect('app', 'icon_assistant', 'player_pic_none')">
                    <img :src="getImgUrl('app/icon_assistant.png')" v-if='!iconsFlag.icon_assistant'/>
                    <img :src="iconsFlag.icon_assistant" v-if='iconsFlag.icon_assistant'/>
                  </div>
                  <span class="f-18"
                        v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected : '#fff'}">语音助手</span>
                </li>
                <li class="aui-flex-row aui-flex-center">
                  <div class="dotbox" v-on:click="handleImgSelect('app', 'icon_music', 'player_pic_none')">
                    <img :src="getImgUrl('app/icon_music.png')" v-if='!iconsFlag.icon_music'/>
                    <img :src="iconsFlag.icon_music" v-if='iconsFlag.icon_music'/>
                  </div>
                  <span class="f-18"
                        v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected : '#fff'}">音乐</span>
                </li>
                <li class="aui-flex-row aui-flex-center">
                  <div class="dotbox" v-on:click="handleImgSelect('app', 'icon_app', 'player_pic_none')">
                    <img :src="getImgUrl('app/icon_app.png')" v-if='!iconsFlag.icon_app'/>
                    <img :src="iconsFlag.icon_app" v-if='iconsFlag.icon_app'/>
                  </div>
                  <span class="f-18"
                        v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected : '#fff'}">应用</span>
                </li>
                <li class="aui-flex-row aui-flex-center">
                  <div class="dotbox" v-on:click="handleImgSelect('app', 'icon_xting', 'player_pic_none')">
                    <img :src="getImgUrl('app/icon_xting.png')" v-if='!iconsFlag.icon_xting'/>
                    <img :src="iconsFlag.icon_xting" v-if='iconsFlag.icon_xting'/>
                  </div>
                  <span class="f-18"
                        v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected : '#fff'}">电台</span>
                </li>
                <li class="aui-flex-row aui-flex-center">
                  <div class="dotbox" v-on:click="handleImgSelect('app', 'icon_service', 'player_pic_none')">
                    <img :src="getImgUrl('app/icon_service.png')" v-if='!iconsFlag.icon_service'/>
                    <img :src="iconsFlag.icon_service" v-if='iconsFlag.icon_service'/>
                  </div>
                  <span class="f-18"
                        v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected : '#fff'}">车服务</span>
                </li>
                <li class="aui-flex-row aui-flex-center">
                  <div class="dotbox" v-on:click="handleImgSelect('app', 'icon_personal', 'player_pic_none')">
                    <img :src="getImgUrl('app/icon_personal.png')" v-if='!iconsFlag.icon_personal'/>
                    <img :src="iconsFlag.icon_personal" v-if='iconsFlag.icon_personal'/>
                  </div>
                  <span class="f-18"
                        v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected : '#fff'}">个人中心</span>
                </li>
                <li class="aui-flex-row aui-flex-center">
                  <div class="dotbox" v-on:click="handleImgSelect('app', 'icon_club', 'player_pic_none')">
                    <img :src="getImgUrl('app/icon_club.png')" v-if='!iconsFlag.icon_club'/>
                    <img :src="iconsFlag.icon_club" v-if='iconsFlag.icon_club'/>
                  </div>
                  <span class="f-18"
                        v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected : '#fff'}">车友圈</span>
                </li>
                <li class="aui-flex-row aui-flex-center">
                  <div class="dotbox" v-on:click="handleImgSelect('app', 'icon_carpark', 'player_pic_none')">
                    <img :src="getImgUrl('app/icon_carpark.png')" v-if='!iconsFlag.icon_carpark'/>
                    <img :src="iconsFlag.icon_carpark" v-if='iconsFlag.icon_carpark'/>
                  </div>
                  <span class="f-18"
                        v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected : '#fff'}">车乐汇</span>
                </li>
                <li class="aui-flex-row aui-flex-center">
                  <div class="dotbox" v-on:click="handleImgSelect('app', 'icon_setting', 'player_pic_none')">
                    <img :src="getImgUrl('app/icon_setting.png')" v-if='!iconsFlag.icon_setting'/>
                    <img :src="iconsFlag.icon_setting" v-if='iconsFlag.icon_setting'/>
                  </div>
                  <span class="f-18"
                        v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected : '#fff'}">设置</span>
                </li>
                <li class="aui-flex-row aui-flex-center">
                  <div class="dotbox" v-on:click="handleImgSelect('app', 'icon_shop', 'player_pic_none')">
                    <img :src="getImgUrl('app/icon_shop.png')" v-if='!iconsFlag.icon_shop'/>
                    <img :src="iconsFlag.icon_shop" v-if='iconsFlag.icon_shop'/>
                  </div>
                  <span class="f-18"
                        v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected : '#fff'}">奔腾商城</span>
                </li>
                <li class="aui-flex-row aui-flex-center">
                  <div class="dotbox" v-on:click="handleImgSelect('app', 'icon_cboxcar', 'player_pic_none')">
                    <img :src="getImgUrl('app/icon_cboxcar.png')" v-if='!iconsFlag.icon_cboxcar'/>
                    <img :src="iconsFlag.icon_cboxcar" v-if='iconsFlag.icon_cboxcar'/>
                  </div>
                  <span class="f-18"
                        v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected : '#fff'}">央视影音</span>
                </li>
                <li class="aui-flex-row aui-flex-center">
                  <div class="dotbox" v-on:click="handleImgSelect('app', 'icon_instruction', 'player_pic_none')">
                    <img :src="getImgUrl('app/icon_instruction.png')" v-if='!iconsFlag.icon_instruction'/>
                    <img :src="iconsFlag.icon_instruction" v-if='iconsFlag.icon_instruction'/>
                  </div>
                  <span class="f-18"
                        v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected : '#fff'}">使用手册</span>
                </li>
                <li class="aui-flex-row aui-flex-center">
                  <div class="dotbox" v-on:click="handleImgSelect('app', 'icon_xkan', 'player_pic_none')">
                    <img :src="getImgUrl('app/icon_xkan.png')" v-if='!iconsFlag.icon_xkan'/>
                    <img :src="iconsFlag.icon_xkan" v-if='iconsFlag.icon_xkan'/>
                  </div>
                  <span class="f-18"
                        v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected: '#fff'}">媒体</span>
                </li>
                <li class="aui-flex-row aui-flex-center">
                  <div class="dotbox" v-on:click="handleImgSelect('app', 'icon_carchat', 'player_pic_none')">
                    <img :src="getImgUrl('app/icon_carchat.png')" v-if='!iconsFlag.icon_carchat'/>
                    <img :src="iconsFlag.icon_carchat" v-if='iconsFlag.icon_carchat'/>
                  </div>
                  <span class="f-18"
                        v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected: '#fff'}">车信</span>
                </li>
                <li class="aui-flex-row aui-flex-center">
                  <div class="dotbox" v-on:click="handleImgSelect('app', 'icon_settings', 'player_pic_none')">
                    <img :src="getImgUrl('app/icon_settings.png')" v-if='!iconsFlag.icon_settings'/>
                    <img :src="iconsFlag.icon_settings" v-if='iconsFlag.icon_settings'/>
                  </div>
                  <span class="f-18"
                        v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected: '#fff'}">全景影像</span>
                </li>
                <li class="aui-flex-row aui-flex-center">
                  <div class="dotbox" v-on:click="handleImgSelect('app', 'icon_practice', 'player_pic_none')">
                    <img :src="getImgUrl('app/icon_practice.png')" v-if='!iconsFlag.icon_practice'/>
                    <img :src="iconsFlag.icon_practice" v-if='iconsFlag.icon_practice'/>
                  </div>
                  <span class="f-18"
                        v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected : '#fff'}">语音训练</span>
                </li>
                <li class="aui-flex-row aui-flex-center"></li>
                <li class="aui-flex-row aui-flex-center"></li>
                <li class="aui-flex-row aui-flex-center"></li>
                <li class="aui-flex-row aui-flex-center"></li>
              </ul>
            </div>
            <ul class="app aui-flex-col" v-if="editable && activeIndex3 == 0">
              <li class="aui-flex-row aui-flex-center">
                <div class="dotbox" v-on:click="handleImgSelect('app', 'icon_assistant', 'player_pic_none')">
                  <img v-if='!iconsFlag.icon_assistant' :src="getImgUrl('app/icon_assistant.png')" />
                  <img v-if='iconsFlag.icon_assistant' :src="iconsFlag.icon_assistant" />
                </div>
                <span v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected : '#fff'}" class="f-18">语音助手</span>
              </li>
              <li class="aui-flex-row aui-flex-center">
                <div class="dotbox" v-on:click="handleImgSelect('app', 'icon_music', 'player_pic_none')">
                  <img v-if='!iconsFlag.icon_music' :src="getImgUrl('app/icon_music.png')" />
                  <img v-if='iconsFlag.icon_music' :src="iconsFlag.icon_music" />
                </div>
                <span v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected : '#fff'}" class="f-18">音乐</span>
              </li>
              <li class="aui-flex-row aui-flex-center">
                <div class="dotbox" v-on:click="handleImgSelect('app', 'icon_app', 'player_pic_none')">
                  <img v-if='!iconsFlag.icon_app' :src="getImgUrl('app/icon_app.png')" />
                  <img v-if='iconsFlag.icon_app' :src="iconsFlag.icon_app" />
                </div>
                <span v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected : '#fff'}" class="f-18">应用</span>
              </li>
              <li class="aui-flex-row aui-flex-center">
                <div class="dotbox" v-on:click="handleImgSelect('app', 'icon_xting', 'player_pic_none')">
                  <img v-if='!iconsFlag.icon_xting' :src="getImgUrl('app/icon_xting.png')" />
                  <img v-if='iconsFlag.icon_xting' :src="iconsFlag.icon_xting" />
                </div>
                <span v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected : '#fff'}" class="f-18">电台</span>
              </li>
              <li class="aui-flex-row aui-flex-center">
                <div class="dotbox" v-on:click="handleImgSelect('app', 'icon_service', 'player_pic_none')">
                  <img v-if='!iconsFlag.icon_service' :src="getImgUrl('app/icon_service.png')" />
                  <img v-if='iconsFlag.icon_service' :src="iconsFlag.icon_service" />
                </div>
                <span v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected : '#fff'}" class="f-18">车服务</span>
              </li>
            </ul>
            <ul class="app" v-if="editable && activeIndex3 == 1">
              <li class="aui-flex-row aui-flex-center">
                <div class="dotbox" v-on:click="handleImgSelect('app', 'icon_personal', 'player_pic_none')">
                  <img v-if='!iconsFlag.icon_personal' :src="getImgUrl('app/icon_personal.png')" />
                  <img v-if='iconsFlag.icon_personal' :src="iconsFlag.icon_personal" />
                </div>
                <span v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected : '#fff'}" class="f-18">个人中心</span>
              </li>
              <li class="aui-flex-row aui-flex-center">
                <div class="dotbox" v-on:click="handleImgSelect('app', 'icon_club', 'player_pic_none')">
                  <img v-if='!iconsFlag.icon_club' :src="getImgUrl('app/icon_club.png')" />
                  <img v-if='iconsFlag.icon_club' :src="iconsFlag.icon_club" />
                </div>
                <span v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected : '#fff'}" class="f-18">车友圈</span>
              </li>
              <li class="aui-flex-row aui-flex-center">
                <div class="dotbox" v-on:click="handleImgSelect('app', 'icon_carpark', 'player_pic_none')">
                  <img v-if='!iconsFlag.icon_carpark' :src="getImgUrl('app/icon_carpark.png')" />
                  <img v-if='iconsFlag.icon_carpark' :src="iconsFlag.icon_carpark" />
                </div>
                <span v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected : '#fff'}" class="f-18">车乐汇</span>
              </li>
              <li class="aui-flex-row aui-flex-center">
                <div class="dotbox" v-on:click="handleImgSelect('app', 'icon_setting', 'player_pic_none')">
                  <img v-if='!iconsFlag.icon_setting' :src="getImgUrl('app/icon_setting.png')" />
                  <img v-if='iconsFlag.icon_setting' :src="iconsFlag.icon_setting" />
                </div>
                <span v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected : '#fff'}" class="f-18">设置</span>
              </li>
              <li class="aui-flex-row aui-flex-center">
                <div class="dotbox" v-on:click="handleImgSelect('app', 'icon_shop', 'player_pic_none')">
                  <img v-if='!iconsFlag.icon_shop' :src="getImgUrl('app/icon_shop.png')" />
                  <img v-if='iconsFlag.icon_shop' :src="iconsFlag.icon_shop" />
                </div>
                <span v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected : '#fff'}" class="f-18">奔腾商城</span>
              </li>
            </ul>
            <ul class="app" v-if="editable && activeIndex3 == 2">
              <li class="aui-flex-row aui-flex-center">
                <div class="dotbox" v-on:click="handleImgSelect('app', 'icon_cboxcar', 'player_pic_none')">
                  <img v-if='!iconsFlag.icon_cboxcar' :src="getImgUrl('app/icon_cboxcar.png')" />
                  <img v-if='iconsFlag.icon_cboxcar' :src="iconsFlag.icon_cboxcar" />
                </div>
                <span v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected : '#fff'}" class="f-18">央视影音</span>
              </li>
              <li class="aui-flex-row aui-flex-center">
                <div class="dotbox" v-on:click="handleImgSelect('app', 'icon_instruction', 'player_pic_none')">
                  <img v-if='!iconsFlag.icon_instruction' :src="getImgUrl('app/icon_instruction.png')" />
                  <img v-if='iconsFlag.icon_instruction' :src="iconsFlag.icon_instruction" />
                </div>
                <span v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected : '#fff'}" class="f-18">使用手册</span>
              </li>
              <li class="aui-flex-row aui-flex-center">
                <div class="dotbox" v-on:click="handleImgSelect('app', 'icon_xkan', 'player_pic_none')">
                  <img v-if='!iconsFlag.icon_xkan' :src="getImgUrl('app/icon_xkan.png')" />
                  <img v-if='iconsFlag.icon_xkan' :src="iconsFlag.icon_xkan" />
                </div>
                <span v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected: '#fff'}" class="f-18">媒体</span>
              </li>
              <li class="aui-flex-row aui-flex-center">
                <div class="dotbox" v-on:click="handleImgSelect('app', 'icon_carchat', 'player_pic_none')">
                  <img v-if='!iconsFlag.icon_carchat' :src="getImgUrl('app/icon_carchat.png')" />
                  <img v-if='iconsFlag.icon_carchat' :src="iconsFlag.icon_carchat" />
                </div>
                <span v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected: '#fff'}" class="f-18">车信</span>
              </li>
              <li class="aui-flex-row aui-flex-center">
                <div class="dotbox" v-on:click="handleImgSelect('app', 'icon_settings', 'player_pic_none')">
                  <img v-if='!iconsFlag.icon_settings' :src="getImgUrl('app/icon_settings.png')" />
                  <img v-if='iconsFlag.icon_settings' :src="iconsFlag.icon_settings" />
                </div>
                <span v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected: '#fff'}" class="f-18">全景影像</span>
              </li>
            </ul>
            <ul class="app" v-if="editable && activeIndex3 == 3">
              <li class="aui-flex-row aui-flex-center">
                <div class="dotbox" v-on:click="handleImgSelect('app', 'icon_practice', 'player_pic_none')">
                  <img v-if='!iconsFlag.icon_practice' :src="getImgUrl('app/icon_practice.png')" />
                  <img v-if='iconsFlag.icon_practice' :src="iconsFlag.icon_practice" />
                </div>
                <span v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected : '#fff'}" class="f-18">语音训练</span>
              </li>
              <li class="aui-flex-row aui-flex-center">
                <div class="dotbox" v-on:click="handleImgSelect('app', 'icon_emanual', 'player_pic_none')">
                  <img v-if='!iconsFlag.icon_emanual' :src="getImgUrl('app/icon_emanual.png')" />
                  <img v-if='iconsFlag.icon_emanual' :src="iconsFlag.icon_emanual" />
                </div>
                <span v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected : '#fff'}" class="f-18">电子手册</span>
              </li>
              <li class="aui-flex-row aui-flex-center"></li>
              <li class="aui-flex-row aui-flex-center"></li>
              <li class="aui-flex-row aui-flex-center"></li>
            </ul>
            <div v-on:click="handleImgSelect('app', 'scrollbar_')" class="slider dotbox aui-flex-col" v-bind:style="{backgroundImage: iconsFlag['scrollbar_background.9'] ? getBgImgUrl_(iconsFlag['scrollbar_background.9']) : getBgImgUrl('app/scrollbar_background.9.png')}">
              <span></span>
              <div v-bind:style="{ width: sliderW, left: scrollLeft, backgroundImage: iconsFlag['scrollbar_foreground.9'] ? getBgImgUrl_(iconsFlag['scrollbar_foreground.9']) : getBgImgUrl('app/scrollbar_foreground.9.png')}"><span v-bind:style="{backgroundImage: iconsFlag['scrollbar_shadow.9'] ? getBgImgUrl_(iconsFlag['scrollbar_shadow.9']) : getBgImgUrl('app/scrollbar_shadow.9.png')}"></span></div>
            </div>
          </template>
          <!-- 应用中心 /-->
        </div>

        <!-- 顶部状态栏 -->
        <div v-if="showStatbar" class="statbar aui-flex-col aui-flex-middle">
          <img :src="getImgUrl('statusbar/signal_mobile.png')" />
          <span class="f-14" v-bind:style="{color: '#fff'}">中国电信</span>
          <img :src="getImgUrl('statusbar/USB-ico.png')" />
          <img :src="getImgUrl('statusbar/bluetooth_2.png')" />
          <img :src="getImgUrl('statusbar/weather.png')" />
          <span class="f-14" v-bind:style="{color: '#fff'}">23℃</span>
        </div>

        <!-- 负一屏 -->
        <template v-if="negative">
          <div class="negative aui-flex-col" v-bind:style="{width: pW + 'px', height: '433px'}">
            <div class="l-c">
              <strong
                v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal: '#ffffff'}">快捷设置</strong>
              <ul>

                <li class="slider_ dotbox">
                  <el-slider
                    :disabled=true
                    @change="handleImgSelect('negative', 'slider_bg')"
                    height="173px"
                    v-model="lightness" vertical>
                  </el-slider>
                  <img :src="getImgUrl('negative/icon_light.png')" class="dotbox" v-if='!iconsFlag.icon_light'
                       v-on:click="handleImgSelect('negative', 'icon_light')"/>
                  <img :src="iconsFlag.icon_light" class="dotbox" v-if='iconsFlag.icon_light'
                       v-on:click="handleImgSelect('negative', 'icon_light')"/>
                  <div @click="handleImgSelect('negative', 'slider_bg')" class="bg-box"
                       v-bind:style="{backgroundImage: iconsFlag.slider_bg ? getBgImgUrl_(iconsFlag.slider_bg) : getBgImgUrl('negative/slider_bg.png')}"></div>
                </li>

                <li class="slider_ dotbox">
                  <el-slider
                    :disabled=true
                    @change="handleImgSelect('negative', 'slider_bg')"
                    height="173px"
                    v-model="volumn" vertical>
                  </el-slider>
                  <img :src="getImgUrl('negative/icon_voice.png')" class="dotbox" style="bottom: 22px;"
                       v-if='!iconsFlag.icon_voice' v-on:click="handleImgSelect('negative', 'icon_voice')"/>
                  <img :src="iconsFlag.icon_voice" class="dotbox" style="bottom: 22px;" v-if='iconsFlag.icon_voice'
                       v-on:click="handleImgSelect('negative', 'icon_voice')"/>
                  <div @click="handleImgSelect('negative', 'slider_bg')" class="bg-box"
                       v-bind:style="{backgroundImage: iconsFlag.slider_bg ? getBgImgUrl_(iconsFlag.slider_bg) : getBgImgUrl('negative/slider_bg.png')}"></div>
                </li>


                <li @click="handleClick($event)" v-bind:key="index" v-for="(item,index) in nbtns">
                  <img :src="getImgUrl('negative/' + item)" class="dotbox" v-if='!iconsFlag[item.slice(0, -4)]'
                       v-on:click="handleImgSelect('negative', item.slice(0, -5))"/>
                  <img :src="iconsFlag[item.slice(0, -4)]" class="dotbox" v-if='iconsFlag[item.slice(0, -4)]'
                       v-on:click="handleImgSelect('negative', item.slice(0, -5))"/>
                  <img :src="getImgUrl('negative/' + nbtns_p[index])" class="dotbox"
                       v-if='!iconsFlag[nbtns_p[index].slice(0, -4)]'
                       v-on:click="handleImgSelect('negative', item.slice(0, -5))"/>
                  <img :src="iconsFlag[nbtns_p[index].slice(0, -4)]" class="dotbox"
                       v-if='iconsFlag[nbtns_p[index].slice(0, -4)]'
                       v-on:click="handleImgSelect('negative', item.slice(0, -5))"/>
                </li>

              </ul>
            </div>


            <div class="r-c">
              <strong
                v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal: '#ffffff'}">应用插件</strong>
              <ul>
                <li @click="handleClick($event)" v-bind:key="index" v-for="(item,index) in abtns">
                  <img :src="getImgUrl('negative/' + item.img)" class="dotbox" v-if='!iconsFlag[item.img.slice(0, -4)]'
                       v-on:click="handleImgSelect('negative', item.img.slice(0, -5))"/>
                  <img :src="iconsFlag[item.img.slice(0, -4)]" class="dotbox" v-if='iconsFlag[item.img.slice(0, -4)]'
                       v-on:click="handleImgSelect('negative', item.img.slice(0, -5))"/>
                  <span class="f-14"
                        v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal: '#ffffff'}">{{item.name}}</span>
                </li>
              </ul>
            </div>
          </div>
        </template>
        <!-- 负一屏 /-->

        <!-- 设置 -->
        <template v-if="settings_1">
          <div class="setting-box aui-flex-col">
            <div class="navbar_s aui-flex-row aui-flex-between aui-flex-center">
              <img :src="getImgUrl('controller/navi_back.png')" class="dotbox"
                   style="width: 30px;margin-bottom: 30px;margin-left: -55px" v-if='!iconsFlag.navi_back'
                   v-on:click="handleImgSelect('controller', 'navi_back')"/>
              <img :src="iconsFlag.navi_back" class="dotbox" style="width: 30px;margin-bottom: 30px;margin-left: -55px"
                   v-if='iconsFlag.navi_back' v-on:click="handleImgSelect('controller', 'navi_back')"/>
              <img :src="getImgUrl('controller/navi_home.png')" class="dotbox"
                   style="width: 30px;;margin-left: -20px;margin-left: -55px" v-if='!iconsFlag.navi_home'
                   v-on:click="handleImgSelect('controller', 'navi_home')"/>
              <img :src="iconsFlag.navi_home" class="dotbox" style="width: 30px;;margin-left: -20px;margin-left: -55px"
                   v-if='iconsFlag.navi_home' v-on:click="handleImgSelect('controller', 'navi_home')"/>
              <div class="dotbox"
                   v-bind:style="{width:'12px',right:'13px', zIndex: 103,backgroundImage: iconsFlag['navi_bg_right.9'] ? getBgImgUrl_(iconsFlag['navi_bg_right.9']) : getBgImgUrl('controller/navi_bg_right.9.png')}"
                   v-on:click.stop="handleImgSelect('controller', 'navi_bg_right.9')"></div>
              <div class="bg-box dotbox"
                   v-bind:style="{backgroundImage: iconsFlag['navi_bg_left.9'] ? getBgImgUrl_(iconsFlag['navi_bg_left.9']) : getBgImgUrl('controller/navi_bg_left.9.png')}"
                   v-on:click.stop="handleImgSelect('controller', 'navi_bg_left.9')"></div>
            </div>
            <div class="menu_s">
              <el-menu default-active="settings_menu_1_index" class="el-menu-vertical" @select="handleS1Select">
                <el-menu-item v-for="(item,index) in settings_menu_1" :key="index" index='index' class="dotbox" v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal: '#ffffff'}">
                  <span style="z-index: 102;position: relative">{{item}}</span>
                  <div class="bg-box dotbox" v-bind:style="{backgroundImage: iconsFlag['bg_item_select'] ? getBgImgUrl_(iconsFlag['bg_item_select']) : getBgImgUrl('controller/bg_item_select.png')}"></div>
                </el-menu-item>
              </el-menu>
              <div class="bg-box dotbox" v-on:click.stop="handleImgSelect('controller', 'bg_main_left_tab')" v-bind:style="{backgroundImage: iconsFlag.bg_main_left_tab ? getBgImgUrl_(iconsFlag.bg_main_left_tab) : getBgImgUrl('controller/bg_main_left_tab.png')}"></div>
            </div>
            <div class="setting-tab aui-flex-auto">
              <div class="linear"></div>
              <el-tabs v-model="settings_menu_1_activeName" v-bind:style="{color: settings_menu_1_activeName == 'first' ? (formData && formData.colorSelected ? formData.colorSelected + '!important' : '#fff') : (formData && formData.colorNormal ? formData.colorNormal + '!important' : '#ffffff')}">
                <el-tab-pane label="安全设置" name="first" style="width:50%;">
                  <div class="aui-flex-col aui-flex-between">
                    <div style="width: 90%;margin-bottom: 20px;"  class="linear"></div>
                    <div class="item-title" style="font-size: 16px;" v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected: '#fff'}">交通标志识别</div>
                    <div class="item-cont" style="padding-left: 0;">
                      <div @click="handleLookVideo" class="block" style="margin-right:-140px;">
                        <img :src="getImgUrl('controller/btn_off.png')" class="dotbox"
                             style="width: 75px; height: 31px;float: left;margin-top: -5px;float:right;"
                             v-if="!iconsFlag.btn_off" v-on:click="handleImgSelect('controller', 'btn_on', 'btn_off')"/>
                        <img :src="iconsFlag.btn_off" class="dotbox"
                             style="width: 75px; height: 31px;float: left;margin-top: -5px;float:right;"
                             v-if="iconsFlag.btn_off" v-on:click="handleImgSelect('controller', 'btn_on', 'btn_off')"/>
                      </div>
                    </div>
                  </div>
                  <div class="aui-flex-col aui-flex-between">
                    <div style="margin-bottom: 20px;width: 90%;" class="linear"></div>
                    <div class="item-title" style="font-size: 16px;"
                         v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected: '#fff'}">
                      驾驶员注意力提醒
                    </div>
                    <div class="item-cont" style="padding-left: 0;">
                      <div @click="handleLookVideo" class="block" style="margin-right:-140px;">
                        <img :src="getImgUrl('controller/btn_off.png')" class="dotbox"
                             style="width: 75px; height: 31px;float: left;margin-top: -5px;float:right;"
                             v-if="!iconsFlag.btn_off" v-on:click="handleImgSelect('controller', 'btn_on', 'btn_off')"/>
                        <img :src="iconsFlag.btn_off" class="dotbox"
                             style="width: 75px; height: 31px;float: left;margin-top: -5px;float:right;"
                             v-if="iconsFlag.btn_off" v-on:click="handleImgSelect('controller', 'btn_on', 'btn_off')"/>
                      </div>
                    </div>
                  </div>
                  <div class="aui-flex-col aui-flex-between">
                    <div style="width: 90%;margin-bottom: 20px;"  class="linear"></div>
                    <div class="item-title" style="font-size: 16px;" v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected: '#fff'}">智能安全外后视镜</div>
                    <div class="item-cont" style="padding-left: 0;">
                      <div @click="handleLookVideo" class="block" style="margin-right:-140px;">
                        <img :src="getImgUrl('controller/btn_on.png')" class="dotbox"
                             style="width: 75px; height: 31px;float: left;margin-top: -5px;float:right;"
                             v-if="!iconsFlag.btn_on" v-on:click="handleImgSelect('controller', 'btn_on', 'btn_off')"/>
                        <img :src="iconsFlag.btn_on" class="dotbox"
                             style="width: 75px; height: 31px;float: left;margin-top: -5px;float:right;"
                             v-if="iconsFlag.btn_on" v-on:click="handleImgSelect('controller', 'btn_on', 'btn_off')"/>
                      </div>
                    </div>
                  </div>
                  <p style="width: 90%;text-align:left;display:block;line-height: 22px;font-size: 14px;" v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal: '#ffffff'}">注意事项:<br />
                    1.启动该功能后，在指定工况，镜片会自动调节角度。<br />
                    2.为扩大视野且不丢失后方近车身区域安全视野，请将两侧镜片分别调节至刚好看到车身位置。
                  </p>
                </el-tab-pane>
                <el-tab-pane label="舒适设置" name="second" :disabled=true></el-tab-pane>
                <el-tab-pane label="灯光设置" name="third" :disabled=true></el-tab-pane>
                <el-tab-pane label="驾驶员状态监测系统" name="fourth" :disabled=true></el-tab-pane>
              </el-tabs>
            </div>
          </div>
        </template>


        <template v-if="settings_2">
          <div class="setting-box aui-flex-col">
            <div class="navbar_s aui-flex-row aui-flex-between aui-flex-center">
              <img :src="getImgUrl('controller/navi_back.png')" class="dotbox"
                   style="width: 30px;margin-bottom: 30px;margin-left: -55px" v-if='!iconsFlag.navi_back'
                   v-on:click="handleImgSelect('controller', 'navi_back')"/>
              <img :src="iconsFlag.navi_back" class="dotbox" style="width: 30px;margin-bottom: 30px;margin-left: -55px"
                   v-if='iconsFlag.navi_back' v-on:click="handleImgSelect('controller', 'navi_back')"/>
              <img :src="getImgUrl('controller/navi_home.png')" class="dotbox"
                   style="width: 30px;;margin-left: -20px;margin-left: -55px" v-if='!iconsFlag.navi_home'
                   v-on:click="handleImgSelect('controller', 'navi_home')"/>
              <img :src="iconsFlag.navi_home" class="dotbox" style="width: 30px;;margin-left: -20px;margin-left: -55px"
                   v-if='iconsFlag.navi_home' v-on:click="handleImgSelect('controller', 'navi_home')"/>
              <div class="dotbox"
                   v-bind:style="{width:'12px',right:'13px', zIndex: 103,backgroundImage: iconsFlag['navi_bg_right.9'] ? getBgImgUrl_(iconsFlag['navi_bg_right.9']) : getBgImgUrl('controller/navi_bg_right.9.png')}"
                   v-on:click.stop="handleImgSelect('controller', 'navi_bg_right.9')"></div>
              <div class="bg-box dotbox"
                   v-bind:style="{backgroundImage: iconsFlag['navi_bg_left.9'] ? getBgImgUrl_(iconsFlag['navi_bg_left.9']) : getBgImgUrl('controller/navi_bg_left.9.png')}"
                   v-on:click.stop="handleImgSelect('controller', 'navi_bg_left.9')"></div>
            </div>
            <div class="menu_s">
              <i class="el-icon-search" style="margin-top: 100px;font-size: 24px;margin-right: 39px;color: #ffffff;"></i>
              <el-menu default-active="settings_menu_2_index" class="el-menu-vertical" @select="handleS1Select">
                <el-menu-item v-for="(item,index) in settings_menu_2" :key="index" index='index' class="dotbox" v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal: '#ffffff'}">
                  <span style="z-index: 102;position: relative">{{item}}</span>
                  <div class="bg-box dotbox" v-bind:style="{backgroundImage: iconsFlag['bg_item_select'] ? getBgImgUrl_(iconsFlag['bg_item_select']) : getBgImgUrl('controller/bg_item_select.png')}"></div>
                </el-menu-item>
              </el-menu>
              <div class="bg-box dotbox" v-on:click.stop="handleImgSelect('controller', 'bg_main_left_tab')" v-bind:style="{backgroundImage: iconsFlag.bg_main_left_tab ? getBgImgUrl_(iconsFlag.bg_main_left_tab) : getBgImgUrl('controller/bg_main_left_tab.png')}"></div>
            </div>
            <div class="setting-tab aui-flex-auto" style="width: 70%">
              <el-tabs v-model="settings_menu_2_activeName" v-bind:style="{color: settings_menu_2_activeName == 'third' ? (formData && formData.colorSelected ? formData.colorSelected + '!important' : '#fff') : (formData && formData.colorNormal ? formData.colorNormal + '!important' : '#ffffff')}">
                <el-tab-pane label="个性推荐" name="first" :disabled=true></el-tab-pane>
                <el-tab-pane label="排行榜" name="second" :disabled=true></el-tab-pane>
                <el-tab-pane label="分类歌单" name="third">
                  <div class="step">
                    <ul>
                      <li v-for="(item,index) in musicMenu" :key="index" index='index' v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal: '#ffffff',backgroundImage: iconsFlag['background_category'] ? getBgImgUrl_(iconsFlag['background_category']) : getBgImgUrl('controller/background_category.png')}" class="dotbox" v-on:click="handleImgSelect('controller', 'background_category')">{{item}}</li>
                    </ul>
                    <div class="slider aui-flex-col" v-bind:style="{backgroundImage: iconsFlag['scrollbar_background.9'] ? getBgImgUrl_(iconsFlag['scrollbar_background.9']) : getBgImgUrl('app/scrollbar_background.9.png')}">
                      <div v-bind:style="{ width: sliderW, backgroundImage: iconsFlag['scrollbar_foreground.9'] ? getBgImgUrl_(iconsFlag['scrollbar_foreground.9']) : getBgImgUrl('app/scrollbar_foreground.9.png')}"></div>
                      <span v-bind:style="{ width: sliderShadowW,backgroundImage: iconsFlag['scrollbar_shadow.9'] ? getBgImgUrl_(iconsFlag['scrollbar_shadow.9']) : getBgImgUrl('app/scrollbar_shadow.9.png') }"></span>
                    </div>
                  </div>
                </el-tab-pane>
              </el-tabs>
            </div>
          </div>
        </template>


        <template v-if="settings_5">
          <div class="search setting-box aui-flex-col">
            <div class="navbar_s aui-flex-row aui-flex-between aui-flex-center">
              <img :src="getImgUrl('controller/navi_back.png')" class="dotbox"
                   style="width: 30px;margin-bottom: 30px;margin-left: -55px" v-if='!iconsFlag.navi_back'
                   v-on:click="handleImgSelect('controller', 'navi_back')"/>
              <img :src="iconsFlag.navi_back" class="dotbox" style="width: 30px;margin-bottom: 30px;margin-left: -55px"
                   v-if='iconsFlag.navi_back' v-on:click="handleImgSelect('controller', 'navi_back')"/>
              <img :src="getImgUrl('controller/navi_home.png')" class="dotbox"
                   style="width: 30px;;margin-left: -20px;margin-left: -55px" v-if='!iconsFlag.navi_home'
                   v-on:click="handleImgSelect('controller', 'navi_home')"/>
              <img :src="iconsFlag.navi_home" class="dotbox" style="width: 30px;;margin-left: -20px;margin-left: -55px"
                   v-if='iconsFlag.navi_home' v-on:click="handleImgSelect('controller', 'navi_home')"/>
              <div class="dotbox" v-on:click.stop="handleImgSelect('controller', 'navi_bg_right.9')"
                   v-bind:style="{width:'12px',right:'13px', zIndex: 103,backgroundImage: iconsFlag['navi_bg_right.9'] ? getBgImgUrl_(iconsFlag['navi_bg_right.9']) : getBgImgUrl('controller/navi_bg_right.9.png')}"></div>
              <div class="bg-box" v-on:click.stop="handleImgSelect('controller', 'navi_bg_left.9')"
                   v-bind:style="{backgroundImage: iconsFlag['navi_bg_left.9'] ? getBgImgUrl_(iconsFlag['navi_bg_left.9']) : getBgImgUrl('controller/navi_bg_left.9.png')}"></div>
            </div>
            <div class="setting-tab aui-flex-auto">
              <div class="linear"></div>
              <div class="voicebar aui-flex-col aui-flex-center aui-flex-middle">
                <span style="position:absolute; float: left; font-size: 14px; left:190px;" v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal: '#ffffff'}">取消</span>
                <img v-if='!iconsFlag["speak/anim_search_voice_1"]' class="dotbox" v-on:click="handleImgSelect('controller', 'anim_search_voice')" style="width: 100px;" :src = "getImgUrl('controller/speak/anim_search_voice_1.png')" />
                <img v-if='iconsFlag["speak/anim_search_voice_1"]' class="dotbox" v-on:click="handleImgSelect('controller', 'anim_search_voice')" style="width: 100px;" :src = "iconsFlag['speak/anim_search_voice_1']" />
                <span style="margin: 0 100px;font-size: 14px;" v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected: '#fff'}">正在聆听...</span>
                <img v-if='!iconsFlag["speak/anim_search_voice_1"]' class="dotbox" v-on:click="handleImgSelect('controller', 'anim_search_voice')" style="width: 100px;" :src = "getImgUrl('controller/speak/anim_search_voice_1.png')" />
                <img v-if='iconsFlag["speak/anim_search_voice_1"]' class="dotbox" v-on:click="handleImgSelect('controller', 'anim_search_voice')" style="width: 100px;" :src = "iconsFlag['speak/anim_search_voice_1']" />
              </div>
              <div class="searchbox">
                <div class="title" v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal: '#ffffff'}">
                  大家都在搜
                  <!-- <span>换一批</span> -->
                </div>
                <div class="list" v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected: '#fff'}">
                  <el-button type="info" plain>星晴</el-button>
                  <el-button type="info" plain>人人都在听</el-button>
                  <el-button type="info" plain>抖音热歌</el-button>
                  <el-button type="info" plain>如果当时 胡夏</el-button>
                </div>
              </div>
            </div>
          </div>
        </template>


        <template v-if="settings_6">
          <div class="setting-box aui-flex-col">
            <div class="navbar_s aui-flex-row aui-flex-between aui-flex-center">
              <img :src="getImgUrl('controller/navi_back.png')" class="dotbox"
                   style="width: 30px;margin-bottom: 30px;margin-left: -55px" v-if='!iconsFlag.navi_back'
                   v-on:click="handleImgSelect('controller', 'navi_back')"/>
              <img :src="iconsFlag.navi_back" class="dotbox" style="width: 30px;margin-bottom: 30px;margin-left: -55px"
                   v-if='iconsFlag.navi_back' v-on:click="handleImgSelect('controller', 'navi_back')"/>
              <img :src="getImgUrl('controller/navi_home.png')" class="dotbox"
                   style="width: 30px;;margin-left: -20px;margin-left: -55px" v-if='!iconsFlag.navi_home'
                   v-on:click="handleImgSelect('controller', 'navi_home')"/>
              <img :src="iconsFlag.navi_home" class="dotbox" style="width: 30px;;margin-left: -20px;margin-left: -55px"
                   v-if='iconsFlag.navi_home' v-on:click="handleImgSelect('controller', 'navi_home')"/>
              <div class="dotbox"
                   v-bind:style="{width:'12px',right:'13px', zIndex: 103,backgroundImage: iconsFlag['navi_bg_right.9'] ? getBgImgUrl_(iconsFlag['navi_bg_right.9']) : getBgImgUrl('controller/navi_bg_right.9.png')}"
                   v-on:click.stop="handleImgSelect('controller', 'navi_bg_right.9')"></div>
              <div class="bg-box dotbox"
                   v-bind:style="{backgroundImage: iconsFlag['navi_bg_left.9'] ? getBgImgUrl_(iconsFlag['navi_bg_left.9']) : getBgImgUrl('controller/navi_bg_left.9.png')}"
                   v-on:click.stop="handleImgSelect('controller', 'navi_bg_left.9')"></div>
            </div>
            <div class="menu_s">
              <el-menu default-active="settings_menu_6_index" class="el-menu-vertical" @select="handleS1Select">
                <el-menu-item v-for="(item,index) in settings_menu_6" :key="index" index='index' class="dotbox" v-bind:style="{color: settings_menu_6_index == index ? (formData && formData.colorSelected ? formData.colorSelected: '#ffffff') : (formData && formData.colorNormal ? formData.colorNormal: '#ffffff')}">
                  <span style="z-index: 102;position: relative">{{item}}</span>
                  <div class="bg-box dotbox" v-bind:style="{backgroundImage: iconsFlag['bg_item_select'] ? getBgImgUrl_(iconsFlag['bg_item_select']) : getBgImgUrl('controller/bg_item_select.png')}"></div>
                </el-menu-item>
              </el-menu>
              <i class="el-icon-shopping-cart-1" style="margin-top: 20px;font-size: 20px;"  v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal: '#ffffff'}"><span style="vertical-align: top;font-size: 14px;margin-left: 10px;">我的购买</span></i>
              <div class="bg-box dotbox" v-on:click.stop="handleImgSelect('controller', 'bg_main_left_tab')" v-bind:style="{backgroundImage: iconsFlag.bg_main_left_tab ? getBgImgUrl_(iconsFlag.bg_main_left_tab) : getBgImgUrl('controller/bg_main_left_tab.png')}"></div>
            </div>
            <div class="setting-tab aui-flex-auto" style="width: 70%; padding-top: 25px;">
              <el-tabs v-model="settings_menu_6_activeName" v-bind:style="{color: settings_menu_6_activeName == 'first' ? (formData && formData.colorNormal ? formData.colorNormal + '!important' : '#BEC3CA') : (formData && formData.colorSelected ? formData.colorSelected + '!important' : '#fff')}">
                <el-tab-pane label="综合" name="first">
                  <div class="shopbox">
                    <ul>
                      <li>
                        <img :src = "getImgUrl('voice/1.png')" />
                        <div class="aui-flex-col aui-flex-between aui-flex-middle" v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected + '!important' : '#fff'}">
                          <span>人物4</span>
                          <span>1389次</span>
                        </div>
                        <span v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal + '!important' : '#BEC3CA'}">990</span>
                        <span v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected + '!important' : '#fff'}">购买</span>
                      </li>
                      <li>
                        <img :src = "getImgUrl('voice/1.png')" />
                        <div class="aui-flex-col aui-flex-between aui-flex-middle" v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected + '!important' : '#fff'}">
                          <span>人物4</span>
                          <span>1389次</span>
                        </div>
                        <span v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal + '!important' : '#BEC3CA'}">990</span>
                        <span v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected + '!important' : '#fff'}">购买</span>
                      </li>
                      <li>
                        <img :src = "getImgUrl('voice/1.png')" />
                        <div class="aui-flex-col aui-flex-between aui-flex-middle" v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected + '!important' : '#fff'}">
                          <span>人物4</span>
                          <span>1389次</span>
                        </div>
                        <span v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal + '!important' : '#BEC3CA'}">990</span>
                        <span v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected + '!important' : '#fff'}">购买</span>
                      </li>
                      <li>
                        <img :src = "getImgUrl('voice/1.png')" />
                        <div class="aui-flex-col aui-flex-between aui-flex-middle" v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected + '!important' : '#fff'}">
                          <span>人物4</span>
                          <span>1389次</span>
                        </div>
                        <span
                          v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal + '!important' : '#BEC3CA'}">990</span>
                        <span
                          v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected + '!important' : '#fff'}">购买</span>
                      </li>
                    </ul>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="销量" name="second" :disabled=true></el-tab-pane>
                <el-tab-pane label="最近上架" name="third" :disabled=true></el-tab-pane>
                <el-tab-pane label="价格" name="forth" :disabled=true></el-tab-pane>
              </el-tabs>
              <div class="slider aui-flex-col" style="margin-top: 0;"
                   v-bind:style="{backgroundImage: iconsFlag['scrollbar_background.9'] ? getBgImgUrl_(iconsFlag['scrollbar_background.9']) : getBgImgUrl('app/scrollbar_background.9.png')}"
                   v-on:click="handleImgSelect('app', 'scrollbar_')">
                <div
                  v-bind:style="{ width: sliderW, backgroundImage: iconsFlag['scrollbar_foreground.9'] ? getBgImgUrl_(iconsFlag['scrollbar_foreground.9']) : getBgImgUrl('app/scrollbar_foreground.9.png')}"></div>
                <span
                  v-bind:style="{ width: sliderShadowW,backgroundImage: iconsFlag['scrollbar_shadow.9'] ? getBgImgUrl_(iconsFlag['scrollbar_shadow.9']) : getBgImgUrl('app/scrollbar_shadow.9.png') }"></span>
              </div>
            </div>
            <el-dialog
              :before-close="handleClose"
              :visible.sync="centerDialogToast"
              center
              close-on-click-modal=false
              custom-class='dotbox dialog-toast'
              modal=false
              modal-append-to-body=false
              width="30%">
              <div class="aui-flex-row aui-flex-center dotbox"
                   v-bind:style="{backgroundImage: iconsFlag.bg_dialog_small ? getBgImgUrl_(iconsFlag.bg_dialog_small) : getBgImgUrl('controller/bg_dialog_small.png')}"
                   v-on:click="handleImgSelect('controller', 'bg_dialog_small')">
                <div class="aui-flex-col aui-flex-center aui-flex-middle" style="font-size: 20px;"
                     v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected: '#fff'}"><span
                  style="background-color: #fff; border-radius: 50%;width: 33px;height: 33px;margin-right: 15px;display: inline-block;"><i
                  class="el-icon-success"
                  style="font-size: 40px;color: rgb(0,200,103);margin: -3px 0 0 -2px;"></i></span>已经删除
                </div>
              </div>
            </el-dialog>
            <el-dialog
              :before-close="handleClose"
              :visible.sync="centerDialogMiddle"
              center
              close-on-click-modal=false
              custom-class='dotbox dialog-middle'
              modal=false
              modal-append-to-body=false
              width="30%">
              <div class="aui-flex-row aui-flex-center dotbox"
                   v-bind:style="{backgroundImage: iconsFlag.bg_dialog_middle ? getBgImgUrl_(iconsFlag.bg_dialog_middle) : getBgImgUrl('controller/bg_dialog_middle.png')}"
                   v-on:click="handleImgSelect('controller', 'bg_dialog_middle')">
                <strong style="font-weight: normal; font-size: 18px;margin-bottom: 5px;"
                        v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected: '#fff'}">提示</strong>
                <span style="font-size:14px"
                      v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected: '#fff'}">扫描支付现金￥5</span>
                <img :src="getImgUrl('controller/qrcode.png')" style="width: 120px; margin-bottom: 20px;"/>
                <i class="el-icon-close"
                   style="position: absolute; top: 20px; left:20px; font-size: 28px;color: #ffffff"></i>
              </div>
            </el-dialog>
            <el-dialog
              :before-close="handleClose"
              :visible.sync="centerDialogBig"
              center
              close-on-click-modal=false
              custom-class='dotbox dialog-big'
              modal=false
              modal-append-to-body=false
              width="30%">
              <div class="aui-flex-row aui-flex-center dotbox"
                   v-bind:style="{backgroundImage: iconsFlag.bg_dialog_big ? getBgImgUrl_(iconsFlag.bg_dialog_big) : getBgImgUrl('controller/bg_dialog_big.png')}"
                   v-on:click="handleImgSelect('controller', 'bg_dialog_big')">
                <strong style="font-weight: normal; font-size: 18px;"
                        v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected: '#fff'}">提示</strong>
                <img :src="getImgUrl('controller/timg.jpg')" style="width: 100px;margin-bottom: 10px;"/>
                <span style="font-size:18px"
                      v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected: '#fff'}">想聊<em
                  style="margin-left: 5px;font-size: 16px;">20MB</em></span>
                <span style="font-size:18px"
                      v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected: '#fff'}">您需要更新后才可使用</span>
                <div class="dialog-footer aui-flex-col aui-flex-middle" slot="footer">
                  <div class="horizontal_divider_line"
                       v-bind:style="{backgroundImage: iconsFlag.horizontal_divider_line ? getBgImgUrl_(iconsFlag.horizontal_divider_line) : getBgImgUrl('controller/horizontal_divider_line.png')}"></div>
                  <div class="divide_vertical"
                       v-bind:style="{backgroundImage: iconsFlag.divide_vertical ? getBgImgUrl_(iconsFlag.divide_vertical) : getBgImgUrl('controller/divide_vertical.png')}"></div>
                  <div class="bg_button_big"
                       style="font-size: 20px;width: 50%;text-align: center;height: 100%;line-height: 56px;background-size: 100% 100%;"
                       v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected: '#fff', backgroundImage: iconsFlag.bg_button_big ? getBgImgUrl_(iconsFlag.bg_button_big) : getBgImgUrl('controller/bg_button_big.png')}">
                    去更新
                  </div>
                  <div class="bg_button_big"
                       style="font-size: 20px;width: 50%;text-align: center;height: 100%;line-height: 56px;background-size: 100% 100%;"
                       v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected: '#fff'}">以后再说
                  </div>
                </div>
                <i class="el-icon-close"
                   style="position: absolute; top: 20px; left:20px; font-size: 28px;color: #ffffff"></i>
              </div>
            </el-dialog>
            <el-dialog
              :before-close="handleClose"
              :visible.sync="centerDialogSmall"
              center
              close-on-click-modal=false
              custom-class='dotbox dialog-small'
              modal=false
              modal-append-to-body=false
              width="30%">
              <div class="aui-flex-row aui-flex-center dotbox"
                   v-bind:style="{backgroundImage: iconsFlag.dialog_bg_middle ? getBgImgUrl_(iconsFlag.dialog_bg_middle) : getBgImgUrl('controller/dialog_bg_middle.png')}"
                   v-on:click="handleImgSelect('controller', 'dialog_bg_middle')">
                <strong style="font-weight: normal; font-size: 18px;"
                        v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected: '#fff'}">提示</strong>
                <span style="font-size:18px;text-align:center;"
                      v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected: '#fff'}">请确认手机上的识别码是否与此相符<br/>350786</span>
                <div class="dialog-footer aui-flex-col aui-flex-middle" slot="footer">
                  <div class="horizontal_divider_line"
                       v-bind:style="{backgroundImage: iconsFlag.divide_line ? getBgImgUrl_(iconsFlag.divide_line) : getBgImgUrl('controller/divide_line.png')}"></div>
                  <div class="divide_vertical"
                       v-bind:style="{backgroundImage: iconsFlag.divide_vertical ? getBgImgUrl_(iconsFlag.divide_vertical) : getBgImgUrl('controller/divide_vertical.png')}"></div>
                  <div class="bg_button_big"
                       style="font-size: 20px;width: 50%;text-align: center;height: 100%;line-height: 56px;background-size: 100% 100%;"
                       v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected: '#fff', backgroundImage: iconsFlag.dialog_bg_button ? getBgImgUrl_(iconsFlag.dialog_bg_button) : getBgImgUrl('controller/dialog_bg_button.png')}">
                    确定
                  </div>
                  <div class="bg_button_big"
                       style="font-size: 20px;width: 50%;text-align: center;height: 100%;line-height: 56px;background-size: 100% 100%;"
                       v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected: '#fff'}">取消
                  </div>
                </div>
              </div>
            </el-dialog>
          </div>
        </template>

        <template v-if="settings_7">
          <div class="setting-box download aui-flex-col">
            <div class="navbar_s aui-flex-row aui-flex-between aui-flex-center">
              <img :src="getImgUrl('controller/navi_back.png')" class="dotbox"
                   style="width: 30px;margin-bottom: 30px;margin-left: -30px;" v-if='!iconsFlag.navi_back'
                   v-on:click="handleImgSelect('controller', 'navi_back')"/>
              <img :src="iconsFlag.navi_back" class="dotbox" style="width: 30px;margin-bottom: 30px;margin-left: -30px;"
                   v-if='iconsFlag.navi_back' v-on:click="handleImgSelect('controller', 'navi_back')"/>
              <div class="dotbox"
                   v-bind:style="{width:'8px',right:'-16px', zIndex: 103,backgroundImage: iconsFlag['navi_bg_right.9'] ? getBgImgUrl_(iconsFlag['navi_bg_right.9']) : getBgImgUrl('controller/navi_bg_right.9.png')}"
                   v-on:click.stop="handleImgSelect('controller', 'navi_bg_right.9')"></div>
              <div class="bg-box dotbox"
                   v-bind:style="{backgroundImage: iconsFlag['navi_bg_left.9'] ? getBgImgUrl_(iconsFlag['navi_bg_left.9']) : getBgImgUrl('controller/navi_bg_left.9.png')}"
                   v-on:click.stop="handleImgSelect('controller', 'navi_bg_left.9')"></div>
            </div>
            <div class="downloadlist aui-flex-row">
              <dl class="playlist"
                  v-bind:style="{color: formData && formData.colorSelected ? formData.colorSelected: '#fff'}">
                <dt class="aui-flex-col">
                  <div class="aui-flex-col aui-flex-middle">
                    <div class="aui-flex-col aui-flex-middle"><i class="el-icon-refresh" style="font-size: 22px;"></i>
                    </div>
                    <div>顺序播放（192）</div>
                  </div>
                  <div><i class="el-icon-sort" style="font-size: 22px;margin-right: 10px;"></i><span>流排排序</span></div>
                </dt>
                <dd class="aui-flex-col is-active">
                  <div class="aui-flex-col aui-flex-middle">
                    <div class="aui-flex-col aui-flex-middle" v-if='!iconsFlag["play/wave_play_01"]'
                         v-on:click="handleImgSelect('controller', 'wave_play')"><span class="dotbox"><img
                      :src="getImgUrl('controller/play/wave_play_' + (playIndex < 10 ? '0' + playIndex : playIndex) + '.png')"
                      style="height: 20px;"/></span></div>
                    <div class="aui-flex-col aui-flex-middle" v-if='iconsFlag["play/wave_play_01"]'
                         v-on:click="handleImgSelect('controller', 'wave_play')"><span class="dotbox"><img
                      :src="iconsFlag['play/wave_play_01']" style="height: 20px;"/></span></div>
                    <div v-bind:style="{color: formData && formData.colorNormal ? formData.colorNormal:'#fbd9a9'}">
                      不爱我就拉倒
                    </div>
                  </div>
                  <div>05:31/12:00</div>
                </dd>
                <dd class="aui-flex-col">
                  <div class="aui-flex-col aui-flex-middle">
                    <div class="aui-flex-col aui-flex-middle"><img
                      :src="getImgUrl('controller/play/wave_play_' + (playIndex < 10 ? '0' + playIndex : playIndex) + '.png')"
                      style="height: 20px;"/></div>
                    <div>等你下课</div>
                  </div>
                  <div>22:00</div>
                </dd>
                <dd class="aui-flex-col">
                  <div class="aui-flex-col aui-flex-middle">
                    <div class="aui-flex-col aui-flex-middle"><img
                      :src="getImgUrl('controller/play/wave_play_' + (playIndex < 10 ? '0' + playIndex : playIndex) + '.png')"
                      style="height: 20px;"/></div>
                    <div>英雄</div>
                  </div>
                  <div>22:00</div>
                </dd>
                <dd class="aui-flex-col">
                  <div class="aui-flex-col aui-flex-middle">
                    <div class="aui-flex-col aui-flex-middle"><img
                      :src="getImgUrl('controller/play/wave_play_' + (playIndex < 10 ? '0' + playIndex : playIndex) + '.png')"
                      style="height: 20px;"/></div>
                    <div>前世情人</div>
                  </div>
                  <div>22:00</div>
                </dd>
                <dd class="aui-flex-col">
                  <div class="aui-flex-col aui-flex-middle">
                    <div class="aui-flex-col aui-flex-middle"><img
                      :src="getImgUrl('controller/play/wave_play_' + (playIndex < 10 ? '0' + playIndex : playIndex) + '.png')"
                      style="height: 20px;"/></div>
                    <div>告白气球</div>
                  </div>
                  <div>22:00</div>
                </dd>
                <dd class="aui-flex-col">
                  <div class="aui-flex-col aui-flex-middle">
                    <div class="aui-flex-col aui-flex-middle"><img
                      :src="getImgUrl('controller/play/wave_play_' + (playIndex < 10 ? '0' + playIndex : playIndex) + '.png')"
                      style="height: 20px;"/></div>
                    <div>听妈妈的话</div>
                  </div>
                  <div>22:00</div>
                </dd>
              </dl>
              <div
                v-bind:style="{backgroundImage: iconsFlag['light_striation'] ? getBgImgUrl_(iconsFlag['light_striation']) : getBgImgUrl('controller/light_striation.png')}"></div>
            </div>
          </div>
        </template>
        <!-- 设置 /-->

        <div class="modal" v-show="centerDialogVisible"></div>

      </div>
    </template>

    <!-- 底部上传内容 -->
    <div ref="scroller_"  v-bind:style="{position: 'absolute', left:0, bottom: 0, right: '220px', height: '284px', overflow: 'hidden'}">

      <ul class="controller" v-bind:style="{height: cH + 'px'}" v-if='editable' v-bind:class="{scale: isScale}">

        <li class="aui-flex-row" v-bind:class="{ last: index == selectedImgs.length - 1 }" v-bind:key="item.name"
            v-for="(item, index) in selectedImgs"
            v-on:mouseout="removeActive($event)" v-on:mouseover="changeActive($event)">

          <div class="cont">
            <div class="imgbox aui-flex-row aui-flex-center aui-flex-middle">
              <img v-if="!iconsFlag[item.name]"
                   :src='getImgUrl(item.path + "/" + item.name + (item.name.indexOf("scrollbar_thumb_vertical") != -1 || item.name.indexOf("scrollbar_track_vertical") != -1 ? ".webp":".png"))'/>
              <img v-if="iconsFlag[item.name]" :src="iconsFlag[item.name]"/>
            </div>
            <span><b>{{item.name.indexOf("/") == -1 ? item.name : item.name.slice(item.name.indexOf("/") + 1)}}.</b>{{item.name.indexOf('scrollbar_thumb_vertical') != -1 || item.name.indexOf("scrollbar_track_vertical") != -1 ? 'webp':'png'}}</span>
            <span>{{item.cName}}{{item.status ? (item.status) : ''}}</span>
            <span style="display:block;margin-bottom: 20px;" v-if="!smallFlag">{{item.width}}x{{item.height}}px</span>
            <p v-if="smallFlag">尺寸:{{item.width}}x{{item.height}}</p>
          </div>
          <div @click.stop="setIconName(item.uploadName)" class="btns aui-flex-col aui-flex-center aui-flex-middle" v-bind:class="[item.flag == 0 ? 'd-center' : '']">
            <button @click="removePic(item.uploadName)" v-if="item.flag != 0" class="aui-flex-col aui-flex-center aui-flex-middle" data-path><i class="icon SkinEditor iconhuifuchuchang"></i></button>
            <el-upload
              :action='uploadUrl'
              :data="uploadData"
              :show-file-list="false"
              :on-success="handleSuccess"
              :on-change="onchange"
              :before-upload="beforeUpload">
              <button class="aui-flex-col aui-flex-center aui-flex-middle"><i
                class="icon SkinEditor iconshangchuan"></i></button>
            </el-upload>
          </div>
          <div class="over"></div>
        </li>

        <li @click.stop="selectRecommend(item)" class="aui-flex-row"
            v-bind:class="{ last: index == selectedRecommedImgs.length - 1 }" v-bind:key="item.name"
            v-for="(item, index) in selectedRecommedImgs" v-on:mouseout="removeActive($event)"
            v-on:mouseover="changeActive($event)">

          <div class="cont">
            <div class="imgbox aui-flex-row aui-flex-center aui-flex-middle">
              <img :src='getImgUrl(item.iconPath)' v-if="!iconsFlag[item.name]"/>
              <img :src="iconsFlag[item.name]" v-if="iconsFlag[item.name]"/>
            </div>
            <span><b>{{item.name.indexOf("/") == -1 ? item.name : item.name.slice(item.name.indexOf("/") + 1)}}.</b>{{item.iconPath.substring(item.iconPath.indexOf('.') + 1)}}</span>
            <span>{{item.cName}}{{item.status ? (item.status) : ''}}</span>
            <span style="display:block;margin-bottom: 20px;" v-if="!smallFlag">{{item.width}}x{{item.height}}px</span>
            <p v-if="smallFlag">尺寸:{{item.width}}x{{item.height}}</p>
          </div>
          <div></div>
          <div class="over"></div>
        </li>
      </ul>
    </div>



  </div>
</template>

<script>

  import BScroll from 'better-scroll'
  import eventBus from '../assets/js/event-bus.js'
  import {clearInterval} from 'timers'
  import $ from 'jquery'
  /* eslint-disable no-new */
  /* eslint-disable */
  export default {
    data() {
      //eslint-disable-next-line
      return {
        iconAttributes : {
          icRadio: {
            fillColor: this.formData && this.formData.colorSelected ? this.formData.colorSelected : '#00C4B4',
            icon: 'ic_radio_down'
          },
          icKRadio: {
            fillColor: this.formData && this.formData.colorNormal ? this.formData.colorNormal : '#ffffff',
            icon: 'ic_k_radio'
          },
        },
        vehicleInfo: {
          brand: '未知',
          series: '',
          deploy: ''
        },
        jindex: false,
        jfm_leftnav03: false,
        jfm_leftnav04: false,
        themeId: '',
        imgPath: "",//"http://121.199.40.245:8080/", "http://yiqi.ui.cn/"
        serverPath: "http://127.0.0.1:9022/sys/",//"http://121.199.40.245:8080/themeeditor/","http://yiqi.ui.cn/themeeditor/"
        uploadUrl: "http://127.0.0.1:9022/sys/theme/upload",
        iconUrlPrefix: null,
        uploadData: {
          iconname: '',
          iconurl: '',
          returnKey: true,
          themeId: '',
          iconSuffix: ".png"
        },
        uploadFlag: false,
        editable: true,
        desktop: false,
        voice: true,
        service: false,
        negative: false,
        passive: true,
        navbar: true,
        rightarea: true,
        settings_1: false,
        settings_2: false,
        settings_3: false,
        settings_4: false,
        settings_5: false,
        settings_6: false,
        settings_7: false,
        showStatbar: false,
        isFilter: false,
        app: false,
        centerDialogVisible: false,
        centerDialogSmall: false,
        centerDialogMiddle: false,
        centerDialogBig: false,
        centerDialogToast: false,
        smallFlag: false,
        activeIndex: 0,//音乐模块导航索引
        activeIndex2: 0,//服务模块导航索引
        activeIndex3: 0,//应用中心索引
        moduleMenuIndex: 2,//右侧模块导航栏
        playIndex: 1,
        settings_menu_1_index: 3,
        settings_menu_1_activeName: 'first',
        settings_menu_2_activeName: 'third',
        settings_menu_2_index: 0,
        settings_menu_4_index: 0,
        settings_menu_6_index: 2,
        settings_menu_4_activeName: 'first',
        settings_menu_6_activeName: 'first',
        cH: 240,
        formData: {
          title: '',
          auditStatus: '',
          status: 1,
          nickname: '',
          headimg: '',
          iconUrl: '',
          userId: '',
          thumb: '',
          panel: '',
          description: '',
          ctTime: '',
          // colorNormal: '#121212',
          // colorOnSurface: '#FFFFFF',
          colorNormal: '#FFFFFF',
          colorSurface: '#121212',
          colorSelected: '#BB86FC',
          colorDisabled: '#000000',
          // colorNormal: '#FFFFFF',
          // colorSelected: '#00C4B4',
          // colorDisabled: '#DFC3CA',
          colorPrimaryVariant: '#3700B3',
          colorSecondary: '#03DAC5',
          colorBackground: '#121212',
          colorError: '#CF6679',
          colorOnSecondary: '#000000',
          colorOnBackground: '#FFFFFF',
          colorOnError: '#000000',
          colorSecondaryVariant: '#03DAC5',
          relations: "",//仪表盘
          audioImg: "",
          serviceImg: "",
          applicationImg: "",
          screenImg: "",
          isDraft: 0,
          fileNameList: [],
          isFree: '1',
          price: 0.00,
          dynamicTags: [],
          categoryId: '',
          tags: [],
          updateFileList: [],
          sysVersion: '',
          localFileList: [],
          yj1: 30,
         yj2: 0,
         yj3: 0,
         yj4: 4,
         yj5: 16,
         yj6: 5,
         yj7: 5,
         yj8: 4,
         fontfamily:"sans-serif-thin",
        colorPrimaryVariant: '#3700B3',
        colorSecondary: '#03DAC5',
        colorBackground: '#121212',
        colorError: '#CF6679',
        colorOnSecondary: '#000000',
        colorOnBackground: '#FFFFFF',
        colorOnSurface: '#FFFFFF',
        colorOnError: '#000000',
        colorSecondaryVariant: '#03DAC5',
        hl1FontFamily: '',
        hl2FontFamily: '',
        hl3FontFamily: '',
        hl4FontFamily: '',
        hl5FontFamily: '',
        hl6FontFamily: '',
        s1FontFamily: '',
        s2FontFamily: '',
        b1FontFamily: '',
        b2FontFamily: '',
        btFontFamily: '',
        capFontFamily: '',
        overFontFamily: '',
        smallCornerSize: 4,
        mediumCornerSize: 4,
        largeCornerSize: 0
        },
        categoryList: null,
        showTags: true,
        scrollLeft: 0,
        interval: null,
        ucenter_menu_index: 1,
        screenLightness: 6,
        lightness: 40,
        volumn: 60,
        lookVideo: true,
        BScroll: null,
        isScale: false,
        isScale_: false,
        pW: 769,
        pH: 433,
        styleObject: {
          width: '769px',
          height: '433px'
        },
        styleObject2: {
          width: '991px',
          height: '225px',
          overflow: 'hidden'
        },
        styleObject3: {
          width: '769px'
        },
        styleObject4: {
          width: '953px',
          height: '187px',
          overflow: 'hidden'
        },
        marks: {
          0: '0',
          6: '6',
          10: '10'
        },
        iconsFlag: {
          'btn_bluetooth_disable': '',
          'btn_bluetooth_disable_p': '',
          'btn_bluetooth_n': '',
          'btn_bluetooth_p': '',
          'bluetooth_01': '',
          'bluetooth_02': '',
          'bluetooth_03': '',
          'bluetooth_04': '',
          'bluetooth_05': '',
          'bluetooth_06': '',
          'bluetooth_07': '',
          'bluetooth_08': '',
          'bluetooth_09': '',
          'bluetooth_10': '',
          'btn_hotspot_disable': '',
          'btn_hotspot_p': '',
          'btn_hotspot_n': '',
          'spot_01': '',
          'spot_02': '',
          'spot_03': '',
          'spot_04': '',
          'spot_05': '',
          'spot_06': '',
          'spot_07': '',
          'spot_08': '',
          'spot_09': '',
          'spot_00': '',
          'btn_bluetooth_phone_n': '',
          'btn_smarthome_n': '',
          'btn_motorcade_n': '',
          'btn_calendar_n': '',
          'btn_listen_n': '',
          'btn_mark_n': '',
          'btn_grade_n': '',
          'btn_offon_disable': '',
          'btn_offon_n': '',
          'btn_offon_p': '',
          'btn_reset_disable': '',
          'btn_reset_n': '',
          'btn_reset_p': '',
          'data_01': '',
          'data_02': '',
          'data_03': '',
          'data_04': '',
          'data_05': '',
          'data_06': '',
          'data_07': '',
          'data_08': '',
          'data_09': '',
          'data_00': '',
          'btn_wifi_disable': '',
          'btn_wifi_n': '',
          'btn_wifi_p': '',
          'wifi_00001': '',
          'wifi_00002': '',
          'wifi_00003': '',
          'wifi_00004': '',
          'wifi_00005': '',
          'wifi_00006': '',
          'wifi_00007': '',
          'wifi_00008': '',
          'wifi_00009': '',
          'wifi_00000': '',
          'icon_light': '',
          'icon_voice': '',
          'slider_bg': '',
          'iv_cover_bg': '',
          'scrollbar_background.9': '',
          'scrollbar_foreground.9': '',
          'scrollbar_shadow.9': '',
          'speak/anim_search_voice_1': '',
          'speak/anim_search_voice_2': '',
          'speak/anim_search_voice_3': '',
          'speak/anim_search_voice_4': '',
          'speak/anim_search_voice_5': '',
          'speak/anim_search_voice_6': '',
          'speak/anim_search_voice_7': '',
          'speak/anim_search_voice_8': '',
          'speak/anim_search_voice_9': '',
          'speak/anim_search_voice_10': '',
          'speak/anim_search_voice_11': '',
          'speak/anim_search_voice_12': '',
          'speak/anim_search_voice_13': '',
          'speak/anim_search_voice_14': '',
          'speak/anim_search_voice_15': '',
          'speak/anim_search_voice_16': '',
          'speak/anim_search_voice_17': '',
          'speak/anim_search_voice_18': '',
          'speak/anim_search_voice_19': '',
          'speak/anim_search_voice_20': '',
          'play/wave_play_01': '',
          'play/wave_play_02': '',
          'play/wave_play_03': '',
          'play/wave_play_04': '',
          'play/wave_play_05': '',
          'play/wave_play_06': '',
          'play/wave_play_07': '',
          'play/wave_play_08': '',
          'play/wave_play_09': '',
          'play/wave_play_10': '',
          'play/wave_play_11': '',
          'play/wave_play_12': '',
          'play/wave_play_13': '',
          'play/wave_play_14': '',
          'play/wave_play_15': '',
          'play/wave_play_16': '',
          'play/wave_play_17': '',
          'play/wave_play_18': '',
          'play/wave_play_19': '',
          'play/wave_play_20': '',
          'slider2/bg_text_tack_seekbar': '',
          'slider2/bg_text_tack_seekbar_progress': '',
          'slider2/text_tack_seekbar_slider': '',
          'background_category': '',
          'background_category_pressed': '',
          'background_preference_selected': '',
          'bg_dialog_big': '',
          'bg_dialog_middle': '',
          'bg_dialog_small': '',
          'dialog_bg_middle': '',
          'divide_line': '',
          'divide_vertical': '',
          'dialog_bg_button': '',
          'dialog_bg_button_long': '',
          'horizontal_divider_line': '',
          'bg_button_big': '',
          'bg_button_big_long': '',
          'bg_item_select': '',
          'bg_main_item_select.9': '',
          'bg_menu_select': '',
          'bg_main_left_tab': '',
          'btn_off': '',
          'btn_on': '',
          'light_striation': '',
          'navi_back': '',
          'navi_bg_left.9': '',
          'navi_bg_right.9': '',
          'navi_home': '',
          'bg_car': '',
          'bg_food': '',
          'bg_movie': '',
          'bg_hotel': '',
          'bg_scenic': '',
          'bg_common': '',
          'btn_collect_n': '',
          'btn_collect_p': '',
          'btn_collect_s': '',
          'btn_collect_disabled': '',
          'bg_card_s': '',
          'btn_list_disabled': '',
          'btn_list_n': '',
          'btn_list_p': '',
          'btn_next_disabled': '',
          'btn_next_n': '',
          'btn_next_p': '',
          'btn_pause_disabled': '',
          'btn_pause_n': '',
          'btn_pause_p': '',
          'btn_play_disabled': '',
          'btn_play_n': '',
          'btn_play_p': '',
          'btn_previous_disabled': '',
          'btn_previous_p': '',
          'player_pic_none': '',
          'bg_service_car_warn': '',
          'connect_n': '',
          'unconnect_n': '',
          'icon_car_red': '',
          'recommend_00': '',
          'recommend_01': '',
          'recommend_02': '',
          'recommend_03': '',
          'recommend_04': '',
          'recommend_05': '',
          'recommend_06': '',
          'recommend_07': '',
          'recommend_08': '',
          'recommend_09': '',
          'recommend_10': '',
          'recommend_11': '',
          'recommend_12': '',
          'recommend_13': '',
          'recommend_14': '',
          'recommend_15': '',
          'music_00': '',
          'music_01': '',
          'music_02': '',
          'music_03': '',
          'music_04': '',
          'music_05': '',
          'music_06': '',
          'music_07': '',
          'music_08': '',
          'music_09': '',
          'music_10': '',
          'music_11': '',
          'music_12': '',
          'music_13': '',
          'music_14': '',
          'music_15': '',
          'service_00': '',
          'service_01': '',
          'service_02': '',
          'service_03': '',
          'service_04': '',
          'service_05': '',
          'service_06': '',
          'service_07': '',
          'service_08': '',
          'service_09': '',
          'service_10': '',
          'service_11': '',
          'service_12': '',
          'service_13': '',
          'service_14': '',
          'service_15': '',
          'app_00': '',
          'app_01': '',
          'app_02': '',
          'app_03': '',
          'app_04': '',
          'app_05': '',
          'app_06': '',
          'app_07': '',
          'app_08': '',
          'app_09': '',
          'app_10': '',
          'app_11': '',
          'app_12': '',
          'app_13': '',
          'app_14': '',
          'app_15': '',
          'music_card_collect': '',
          'music_card_music': '',
          'music_card_radio': '',
          'title_select': '',
          'bg_service_tv': '',
          'icon_xting': '',
          'icon_music': '',
          'icon_app': '',
          'icon_assistant': '',
          'icon_service': '',
          'icon_personal': '',
          'icon_practice': '',
          'icon_club': '',
          'icon_carpark': '',
          'icon_setting': '',
          'icon_shop': '',
          'icon_cboxcar': '',
          'icon_instruction': '',
          'icon_xkan': '',
          'icon_carchat': '',
          'icon_settings': '',
          'icon_emanual': '',
          'btn_previous_n': '',
          'progress/seek_bar_block': '',
          'progress/seek_bar_left_fill': '',
          'progress/seek_bar_middle_fill.9': '',
          'progress/seek_bar_middle_unfill.9': '',
          'progress/seek_bar_right_unfill': '',
          'progress/seek_bar_shadow.9': '',
          'slider3/scrollbar_track_vertical': '',
          'slider3/scrollbar_thumb_vertical': '',
          'slider1/download_progress_bar.9': '',
          'slider1/progress_bg.9': '',
//zt01
          'ic_back_btn': "",
          'ic_vehicle': "",
          'ic_vehicle_unselected': "",
          'car_nav_online_music_selected': "",
          'car_nav_online_radio_normal': "",
          'car_nav_online_radio_selected': "",
          'car_nav_common_radio_normal': "",
          'car_nav_common_radio_selected': "",
          'car_nav_bt_music_normal': "",
          'car_nav_bt_music_selected': "",
          'car_nav_usb_music_normal': "",
          'car_nav_usb_music_selected': "",
          'ic_list': "",
          'ic_list_down': "",
          'ic_fm_sel': "",
          'ic_fm_down': "",
          'ic_fm': "",
          'ic_am_sel': "",
          'ic_am_down': "",
          'ic_am': "",
          /* 'ic_step_down': "",
           'ic_step_down_down': "",
           'ic_step_up': "",
           'ic_step_up_down': "",*/
          // 'ic_collected': "",
          // 'ic_collect': "",
          // 'ic_bw1': "",
          // 'ic_searching':"",
          'shadow': "",
          /*'ic_search': "",
          'ic_search_down': "",
          'ic_pause': "",
          'ic_pause_down': "",
          'ic_play': "",
          'ic_play_down': "",
          'ic_seek_down': "",
          'ic_seek_down_down': "",
          'ic_seek_up': "",
          'ic_seek_up_down': "",*/

          // zt2
          'ic_instrument': "",
          'ic_instrument_unselected': "",
          'ic_my_purchase_unselected': "",
          'ic_my_purchase': "",
          'ic_my_favourite': "",
          'ic_my_favourite_unselected': "",
          'ic_my_downloaded': "",
          'ic_my_downloaded_unselected': "",
          'ic_search': "",
          'ic_user_center': "",
          'ic_refresh': "",
          'ic_delete': "",
          'ic_text_field_search': "",
          'ic_full_screen': "",
          'ic_my_like': "",
          'ic_my_like_unselected': "",
          'ic_themes_delete': "",
          'ic_select': "",
          'ic_select_unselected': "",

          // 首页
          'arrow0': '',
          'arrow3': '',
          'bt_phone_center_icon': '',
          'Component 15': '',
          'dvr_photo_normal': '',
          'dvr_record_normal': '',
          'dvr_widget_icon': '',
          'ic_auto_dest': '',
          'ic_settings_new': '',
          'manual_center': '',
          'more_card_center_icon': '',
          'next': '',
          'oil_center': '',
          'pause_icon': '',
          'pcenter': '',
          'prev': '',
          'videophoto_widget_photo_icon': '',
          'bt_phone_search_ico': '',
          'arrow15': '',
          // 首页背景图标
          'phone_out_card': '',
          'personal_center_out_card': '',
          'more_out_card': '',
          'settings_out_card': '',
          'picture_video_out_card': '',
          'online_music_out_card': '',
          'oil_internet_out_card': '',
          'index_tab_bg': '',


          // 音乐
          'defaultablumpic': '',
          'filter': '',
          'ic_bw1': '',
          'ic_k_radio': '',
          'ic_k_radio_down': '',
          'ic_play': '',
          'ic_play_down': '',
          'ic_radio': '',
          'ic_radio_down': '',
          'usbmedia_ic_search': '',
          'ic_seek_down': '',
          'ic_seek_down_down': '',
          'ic_seek_up': '',
          'ic_seek_up_down': '',
          'ic_step_down': '',
          'ic_step_down_down': '',
          'ic_step_up': '',
          'ic_step_up_down': '',
          'ic_collect': '',
          'ic_list': '',
          'ic_list_down': '',
          'ic_search_down': '',

          // 设置
          'menu_system_arkamys_normal': '',
          'menu_system_arkamys_normal_press': '',
          'menu_system_bt_normal': '',
          'menu_system_bt_press': '',
          'menu_system_camera_normal': '',
          'menu_system_camera_press': '',
          'menu_system_network_normal': '',
          'menu_system_network_press': '',
          'menu_system_normal': '',
          'menu_system_other_normal': '',
          'menu_system_other_press': '',
          'menu_system_press': '',
          'menu_system_time_normal': '',
          'menu_system_time_press': '',
          'menu_system_voice_normal': '',
          'menu_system_voice_press': '',
          'pause_icon': ''

        },

        fmbtns: ['ic_seek_down.png', 'ic_pause.png', 'ic_seek_up.png'],
        fmbtns_p: ['ic_seek_down_down.png', 'ic_pause_down.png', 'ic_seek_up_down.png'],
        // fmbtns_d: ['ic_play.png', 'ic_play.png','ic_play.png'],


        progressW: '30%',
        sliderW: '25%',
        sliderShadowW: '20%',
        ucenterMenu: ['发现', '消息', '通讯录'],
        voiceMenu: ['音乐', '收音机', '我的收藏'],
        serviceMenu: ['车辆', '美食', '电影', '酒店', '景点'],
        musicMenu: ['搞笑', '惊悚', '小品', '情感', '生活', '服务', '美食', '爱情'],

        btns: ['btn_previous_n.png', 'btn_play_n.png', 'btn_next_n.png', 'btn_collect_n.png', 'btn_list_n.png'],
        btns_p: ['btn_previous_p.png', 'btn_play_p.png', 'btn_next_p.png', 'btn_collect_s.png', 'btn_list_p.png'],
        btns_d: ['btn_previous_disabled.png', 'btn_play_disabled.png', 'btn_next_disabled.png', 'btn_collect_disabled.png', 'btn_list_disabled.png'],


        nbtns: ['btn_bluetooth_n.png', 'btn_reset_n.png', 'btn_offon_n.png', 'btn_wifi_n.png', 'btn_hotspot_n.png'],
        nbtns_p: ['btn_bluetooth_p.png', 'btn_reset_p.png', 'btn_offon_p.png', 'btn_wifi_p.png', 'btn_hotspot_p.png'],
        nbtns_d: ['btn_bluetooth_disabled.png', 'btn_reset_disabled.png', 'btn_offon_disabled.png', 'btn_wifi_disabled.png', 'btn_hotspot_disabled.png'],
        abtns: [{
          img: 'btn_bluetooth_phone_n.png', name: '蓝牙电话'
        }, {
          img: 'btn_smarthome_n.png', name: '智能家居'
        }, {
          img: 'btn_motorcade_n.png', name: '车队'
        }, {
          img: 'btn_calendar_n.png', name: '日程管理'
        }, {
          img: 'btn_listen_n.png', name: '听歌识曲'
        }, {
          img: 'btn_mark_n.png', name: '途记'
        }, {
          img: 'btn_grade_n.png', name: '驾驶评分'
        }],
        settings_menu_1: ['WIFI设置', '声音设置', '车辆设置', '通用设置', '语音设置'],
        settings_menu_2: ['在线音乐', '本地音乐', '我的音乐'],
        settings_menu_6: ['个性主题', '流量商城', '全息形象', '整车音效'],
        selectedImgs: [],
        selectedRecommedImgs: [],
        negativePics: [{
          name: 'btn_bluetooth_disable',
          cName: '蓝牙',
          status: '失效',
          path: 'negative',
          width: 120,
          height: 120,
          flag: 0
        }, {
          name: 'btn_bluetooth_disable_p',
          cName: '蓝牙',
          status: '失效',
          path: 'negative',
          width: 120,
          height: 120,
          flag: 0
        }, {
          name: 'btn_bluetooth_n',
          cName: '蓝牙',
          status: '当前',
          path: 'negative',
          width: 120,
          height: 120,
          flag: 0
        }, {
          name: 'btn_bluetooth_p',
          cName: '蓝牙',
          status: '点击',
          path: 'negative',
          width: 120,
          height: 120,
          flag: 0
        }, {
          name: 'bluetooth_01',
          cName: '蓝牙(动画)',
          status: '',
          path: 'negative',
          width: 120,
          height: 120,
          flag: 0
        }, {
          name: 'bluetooth_02',
          cName: '蓝牙(动画)',
          status: '',
          path: 'negative',
          width: 120,
          height: 120,
          flag: 0
        }, {
          name: 'bluetooth_03',
          cName: '蓝牙(动画)',
          status: '',
          path: 'negative',
          width: 120,
          height: 120,
          flag: 0
        }, {
          name: 'bluetooth_04',
          cName: '蓝牙(动画)',
          status: '',
          path: 'negative',
          width: 120,
          height: 120,
          flag: 0
        }, {
          name: 'bluetooth_05',
          cName: '蓝牙(动画)',
          status: '',
          path: 'negative',
          width: 120,
          height: 120,
          flag: 0
        }, {
          name: 'bluetooth_06',
          cName: '蓝牙(动画)',
          status: '',
          path: 'negative',
          width: 120,
          height: 120,
          flag: 0
        }, {
          name: 'bluetooth_07',
          cName: '蓝牙(动画)',
          status: '',
          path: 'negative',
          width: 120,
          height: 120,
          flag: 0
        }, {
          name: 'bluetooth_08',
          cName: '蓝牙(动画)',
          status: '',
          path: 'negative',
          width: 120,
          height: 120,
          flag: 0
        }, {
          name: 'bluetooth_09',
          cName: '蓝牙(动画)',
          status: '',
          path: 'negative',
          width: 120,
          height: 120,
          flag: 0
        }, {
          name: 'bluetooth_10',
          cName: '蓝牙(动画)',
          status: '',
          path: 'negative',
          width: 120,
          height: 120,
          flag: 0
        }, {
          name: 'btn_bluetooth_phone_n',
          cName: '插件icon-蓝牙电话',
          status: '默认',
          path: 'negative',
          width: 120,
          height: 120,
          flag: 0
        }, {
          name: 'btn_smarthome_n',
          cName: '插件icon-智能家居',
          status: '默认',
          path: 'negative',
          width: 120,
          height: 120,
          flag: 0
        }, {
          name: 'btn_motorcade_n',
          cName: '插件icon-车队',
          status: '默认',
          path: 'negative',
          width: 120,
          height: 120,
          flag: 0
        }, {
          name: 'btn_calendar_n',
          cName: '插件icon-日程管理',
          status: '默认',
          path: 'negative',
          width: 120,
          height: 120,
          flag: 0
        }, {
          name: 'btn_listen_n',
          cName: '插件icon-听歌识曲',
          status: '默认',
          path: 'negative',
          width: 120,
          height: 120,
          flag: 0
        }, {
          name: 'btn_mark_n',
          cName: '插件icon-途记',
          status: '默认',
          path: 'negative',
          width: 120,
          height: 120,
          flag: 0
        }, {
          name: 'btn_grade_n',
          cName: '插件icon-驾驶评分',
          status: '默认',
          path: 'negative',
          width: 120,
          height: 120,
          flag: 0
        }, {
          name: 'btn_hotspot_disable',
          cName: '热点',
          status: '失效',
          path: 'negative',
          width: 120,
          height: 120,
          flag: 0
        }, {
          name: 'btn_hotspot_n',
          cName: '热点',
          status: '当前',
          path: 'negative',
          width: 120,
          height: 120,
          flag: 0
        }, {
          name: 'btn_hotspot_p',
          cName: '热点',
          status: '点击',
          path: 'negative',
          width: 120,
          height: 120,
          flag: 0
        }, {
          name: 'spot_00',
          cName: '动画',
          status: '',
          path: 'negative',
          width: 120,
          height: 120,
          flag: 0
        }, {
          name: 'spot_01',
          cName: '动画',
          status: '',
          path: 'negative',
          width: 120,
          height: 120,
          flag: 0
        }, {
          name: 'spot_02',
          cName: '动画',
          status: '',
          path: 'negative',
          width: 120,
          height: 120,
          flag: 0
        }, {
          name: 'spot_03',
          cName: '动画',
          status: '',
          path: 'negative',
          width: 120,
          height: 120,
          flag: 0
        }, {
          name: 'spot_04',
          cName: '动画',
          status: '',
          path: 'negative',
          width: 120,
          height: 120,
          flag: 0
        }, {
          name: 'spot_05',
          cName: '动画',
          status: '',
          path: 'negative',
          width: 120,
          height: 120,
          flag: 0
        }, {
          name: 'spot_06',
          cName: '动画',
          status: '',
          path: 'negative',
          width: 120,
          height: 120,
          flag: 0
        }, {
          name: 'spot_07',
          cName: '动画',
          status: '',
          path: 'negative',
          width: 120,
          height: 120,
          flag: 0
        }, {
          name: 'spot_08',
          cName: '动画',
          status: '',
          path: 'negative',
          width: 120,
          height: 120,
          flag: 0
        }, {
          name: 'spot_09',
          cName: '动画',
          status: '',
          path: 'negative',
          width: 120,
          height: 120,
          flag: 0
        }, {
          name: 'btn_offon_disable',
          cName: 'off/on',
          status: '失效',
          path: 'negative',
          width: 120,
          height: 120,
          flag: 0
        }, {
          name: 'btn_offon_n',
          cName: 'off/on',
          status: '当前',
          path: 'negative',
          width: 120,
          height: 120,
          flag: 0
        }, {
          name: 'btn_offon_p',
          cName: 'off/on',
          status: '点击',
          path: 'negative',
          width: 120,
          height: 120,
          flag: 0
        }, {
          name: 'btn_reset_disable',
          cName: '网络重置',
          status: '失效',
          path: 'negative',
          width: 120,
          height: 120,
          flag: 0
        }, {
          name: 'btn_reset_n',
          cName: '网络重置',
          status: '当前',
          path: 'negative',
          width: 120,
          height: 120,
          flag: 0
        }, {
          name: 'btn_reset_p',
          cName: '网络重置',
          status: '点击',
          path: 'negative',
          width: 120,
          height: 120,
          flag: 0
        }, {
          name: 'data_00',
          cName: '动画',
          status: '',
          path: 'negative',
          width: 120,
          height: 120,
          flag: 0
        }, {
          name: 'data_01',
          cName: '动画',
          status: '',
          path: 'negative',
          width: 120,
          height: 120,
          flag: 0
        }, {
          name: 'data_02',
          cName: '动画',
          status: '',
          path: 'negative',
          width: 120,
          height: 120,
          flag: 0
        }, {
          name: 'data_03',
          cName: '动画',
          status: '',
          path: 'negative',
          width: 120,
          height: 120,
          flag: 0
        }, {
          name: 'data_04',
          cName: '动画',
          status: '',
          path: 'negative',
          width: 120,
          height: 120,
          flag: 0
        }, {
          name: 'data_05',
          cName: '动画',
          status: '',
          path: 'negative',
          width: 120,
          height: 120,
          flag: 0
        }, {
          name: 'data_06',
          cName: '动画',
          status: '',
          path: 'negative',
          width: 120,
          height: 120,
          flag: 0
        }, {
          name: 'data_07',
          cName: '动画',
          status: '',
          path: 'negative',
          width: 120,
          height: 120,
          flag: 0
        }, {
          name: 'data_08',
          cName: '动画',
          status: '',
          path: 'negative',
          width: 120,
          height: 120,
          flag: 0
        }, {
          name: 'data_09',
          cName: '动画',
          status: '',
          path: 'negative',
          width: 120,
          height: 120,
          flag: 0
        }, {
          name: 'btn_wifi_disable',
          cName: 'wifi',
          status: '失效',
          path: 'negative',
          width: 120,
          height: 120,
          flag: 0
        }, {
          name: 'btn_wifi_n',
          cName: '网络重置',
          status: '当前',
          path: 'negative',
          width: 120,
          height: 120,
          flag: 0
        }, {
          name: 'btn_wifi_p',
          cName: '网络重置',
          status: '点击',
          path: 'negative',
          width: 120,
          height: 120,
          flag: 0
        }, {
          name: 'wifi_00000',
          cName: '动画',
          status: '',
          path: 'negative',
          width: 120,
          height: 120,
          flag: 0
        }, {
          name: 'wifi_00001',
          cName: '动画',
          status: '',
          path: 'negative',
          width: 120,
          height: 120,
          flag: 0
        }, {
          name: 'wifi_00002',
          cName: '动画',
          status: '',
          path: 'negative',
          width: 120,
          height: 120,
          flag: 0
        }, {
          name: 'wifi_00003',
          cName: '动画',
          status: '',
          path: 'negative',
          width: 120,
          height: 120,
          flag: 0
        }, {
          name: 'wifi_00004',
          cName: '动画',
          status: '',
          path: 'negative',
          width: 120,
          height: 120,
          flag: 0
        }, {
          name: 'wifi_00005',
          cName: '动画',
          status: '',
          path: 'negative',
          width: 120,
          height: 120,
          flag: 0
        }, {
          name: 'wifi_00006',
          cName: '动画',
          status: '',
          path: 'negative',
          width: 120,
          height: 120,
          flag: 0
        }, {
          name: 'wifi_00007',
          cName: '动画',
          status: '',
          path: 'negative',
          width: 120,
          height: 120,
          flag: 0
        }, {
          name: 'wifi_00008',
          cName: '动画',
          status: '',
          path: 'negative',
          width: 120,
          height: 120,
          flag: 0
        }, {
          name: 'wifi_00009',
          cName: '动画',
          status: '',
          path: 'negative',
          width: 120,
          height: 120,
          flag: 0
        }, {
          name: 'icon_light',
          cName: '亮度',
          status: '默认',
          path: 'negative',
          width: 60,
          height: 60,
          flag: 0
        }, {
          name: 'icon_voice',
          cName: '音量',
          status: '默认',
          path: 'negative',
          width: 60,
          height: 60,
          flag: 0
        }, {
          name: 'slider_bg',
          cName: '滑块',
          status: '默认',
          path: 'negative',
          width: 128,
          height: 274,
          flag: 0
        }],
        appPics: [{
          name: 'player_pic_none',
          cName: '暂未提供',
          status: '默认',
          path: 'app',
          width: 110,
          height: 110,
          flag: 0
        }, {
          name: 'iv_cover_bg',
          cName: '用户头像',
          status: '默认',
          path: 'app',
          width: 84,
          height: 84,
          flag: 0
        }, {
          name: 'scrollbar_background.9',
          cName: '滑条背景',
          status: '默认',
          path: 'app',
          width: 491,
          height: 14,
          flag: 0
        }, {
          name: 'scrollbar_foreground.9',
          cName: '滑条进度背景',
          status: '默认',
          path: 'app',
          width: 83,
          height: 8,
          flag: 0
        }, {
          name: 'scrollbar_shadow.9',
          cName: '滑条进度阴影',
          status: '默认',
          path: 'app',
          width: 93,
          height: 20,
          flag: 0
        }, {
          name: 'icon_xting',
          cName: '电台',
          status: '默认',
          path: 'app',
          width: 186,
          height: 186
        }, {
          name: 'icon_music',
          cName: '音乐',
          status: '默认',
          path: 'app',
          width: 186,
          height: 186
        }, {
          name: 'icon_app',
          cName: '应用',
          status: '默认',
          path: 'app',
          width: 186,
          height: 186
        }, {
          name: 'icon_assistant',
          cName: '语音助手',
          status: '默认',
          path: 'app',
          width: 186,
          height: 186
        }, {
          name: 'icon_service',
          cName: '车服务',
          status: '默认',
          path: 'app',
          width: 186,
          height: 186
        }, {
          name: 'icon_personal',
          cName: '个人中心',
          status: '默认',
          path: 'app',
          width: 186,
          height: 186
        }, {
          name: 'icon_practice',
          cName: '语音训练',
          status: '默认',
          path: 'app',
          width: 186,
          height: 186
        },
          {
            name: 'icon_club',
            cName: '车友圈',
            status: '默认',
            path: 'app',
            width: 186,
            height: 186
          }, {
            name: 'icon_carpark',
            cName: '车乐汇',
            status: '默认',
            path: 'app',
            width: 186,
            height: 186
          }, {
            name: 'icon_setting',
            cName: '设置',
            status: '默认',
            path: 'app',
            width: 186,
            height: 186
          }, {
            name: 'icon_shop',
            cName: '奔腾商城',
            status: '默认',
            path: 'app',
            width: 186,
            height: 186
          }, {
            name: 'icon_cboxcar',
            cName: '央视影音',
            status: '默认',
            path: 'app',
            width: 186,
            height: 186
          }, {
            name: 'icon_instruction',
            cName: '使用手册',
            status: '默认',
            path: 'app',
            width: 186,
            height: 186
          }, {
            name: 'icon_xkan',
            cName: '媒体',
            status: '默认',
            path: 'app',
            width: 186,
            height: 186
          }, {
            name: 'icon_carchat',
            cName: '车信',
            status: '默认',
            path: 'app',
            width: 186,
            height: 186
          }, {
            name: 'icon_settings',
            cName: '全景影像',
            status: '默认',
            path: 'app',
            width: 186,
            height: 186
          }, {
            name: 'icon_emanual',
            cName: '电子手册',
            status: '默认',
            path: 'app',
            width: 186,
            height: 186
          }],
        controllerPics: [{
          name: 'speak/anim_search_voice_1',
          cName: 'speak',
          status: '默认',
          path: 'controller',
          width: 184,
          height: 52,
          flag: 0
        }, {
          name: 'speak/anim_search_voice_2',
          cName: 'speak',
          status: '默认',
          path: 'controller',
          width: 184,
          height: 52,
          flag: 0
        }, {
          name: 'speak/anim_search_voice_3',
          cName: 'speak',
          status: '默认',
          path: 'controller',
          width: 184,
          height: 52,
          flag: 0
        }, {
          name: 'speak/anim_search_voice_4',
          cName: 'speak',
          status: '默认',
          path: 'controller',
          width: 184,
          height: 52,
          flag: 0
        }, {
          name: 'speak/anim_search_voice_5',
          cName: 'speak',
          status: '默认',
          path: 'controller',
          width: 184,
          height: 52,
          flag: 0
        }, {
          name: 'speak/anim_search_voice_6',
          cName: 'speak',
          status: '默认',
          path: 'controller',
          width: 184,
          height: 52,
          flag: 0
        }, {
          name: 'speak/anim_search_voice_7',
          cName: 'speak',
          status: '默认',
          path: 'controller',
          width: 184,
          height: 52,
          flag: 0
        }, {
          name: 'speak/anim_search_voice_8',
          cName: 'speak',
          status: '默认',
          path: 'controller',
          width: 184,
          height: 52,
          flag: 0
        }, {
          name: 'speak/anim_search_voice_9',
          cName: 'speak',
          status: '默认',
          path: 'controller',
          width: 184,
          height: 52,
          flag: 0
        }, {
          name: 'speak/anim_search_voice_10',
          cName: 'speak',
          status: '默认',
          path: 'controller',
          width: 184,
          height: 52,
          flag: 0
        }, {
          name: 'speak/anim_search_voice_11',
          cName: 'speak',
          status: '默认',
          path: 'controller',
          width: 184,
          height: 52,
          flag: 0
        }, {
          name: 'speak/anim_search_voice_12',
          cName: 'speak',
          status: '默认',
          path: 'controller',
          width: 184,
          height: 52,
          flag: 0
        }, {
          name: 'speak/anim_search_voice_13',
          cName: 'speak',
          status: '默认',
          path: 'controller',
          width: 184,
          height: 52,
          flag: 0
        }, {
          name: 'speak/anim_search_voice_14',
          cName: 'speak',
          status: '默认',
          path: 'controller',
          width: 184,
          height: 52,
          flag: 0
        }, {
          name: 'speak/anim_search_voice_15',
          cName: 'speak',
          status: '默认',
          path: 'controller',
          width: 184,
          height: 52,
          flag: 0
        }, {
          name: 'speak/anim_search_voice_16',
          cName: 'speak',
          status: '默认',
          path: 'controller',
          width: 184,
          height: 52,
          flag: 0
        }, {
          name: 'speak/anim_search_voice_17',
          cName: 'speak',
          status: '默认',
          path: 'controller',
          width: 184,
          height: 52,
          flag: 0
        }, {
          name: 'speak/anim_search_voice_18',
          cName: 'speak',
          status: '默认',
          path: 'controller',
          width: 184,
          height: 52,
          flag: 0
        }, {
          name: 'speak/anim_search_voice_19',
          cName: 'speak',
          status: '默认',
          path: 'controller',
          width: 184,
          height: 52,
          flag: 0
        }, {
          name: 'speak/anim_search_voice_20',
          cName: 'speak',
          status: '默认',
          path: 'controller',
          width: 184,
          height: 52,
          flag: 0
        }, {
          name: 'play/wave_play_01',
          cName: 'play',
          status: '默认',
          path: 'controller',
          width: 194,
          height: 160,
          flag: 0
        }, {
          name: 'play/wave_play_02',
          cName: 'play',
          status: '默认',
          path: 'controller',
          width: 194,
          height: 160,
          flag: 0
        }, {
          name: 'play/wave_play_03',
          cName: 'play',
          status: '默认',
          path: 'controller',
          width: 194,
          height: 160,
          flag: 0
        }, {
          name: 'play/wave_play_04',
          cName: 'play',
          status: '默认',
          path: 'controller',
          width: 194,
          height: 160,
          flag: 0
        }, {
          name: 'play/wave_play_05',
          cName: 'play',
          status: '默认',
          path: 'controller',
          width: 194,
          height: 160,
          flag: 0
        }, {
          name: 'play/wave_play_06',
          cName: 'play',
          status: '默认',
          path: 'controller',
          width: 194,
          height: 160,
          flag: 0
        }, {
          name: 'play/wave_play_07',
          cName: 'play',
          status: '默认',
          path: 'controller',
          width: 194,
          height: 160,
          flag: 0
        }, {
          name: 'play/wave_play_08',
          cName: 'play',
          status: '默认',
          path: 'controller',
          width: 194,
          height: 160,
          flag: 0
        }, {
          name: 'play/wave_play_09',
          cName: 'play',
          status: '默认',
          path: 'controller',
          width: 194,
          height: 160,
          flag: 0
        }, {
          name: 'play/wave_play_10',
          cName: 'play',
          status: '默认',
          path: 'controller',
          width: 194,
          height: 160,
          flag: 0
        }, {
          name: 'play/wave_play_11',
          cName: 'play',
          status: '默认',
          path: 'controller',
          width: 194,
          height: 160,
          flag: 0
        }, {
          name: 'play/wave_play_12',
          cName: 'play',
          status: '默认',
          path: 'controller',
          width: 194,
          height: 160,
          flag: 0
        }, {
          name: 'play/wave_play_13',
          cName: 'play',
          status: '默认',
          path: 'controller',
          width: 194,
          height: 160,
          flag: 0
        }, {
          name: 'play/wave_play_14',
          cName: 'play',
          status: '默认',
          path: 'controller',
          width: 194,
          height: 160,
          flag: 0
        }, {
          name: 'play/wave_play_15',
          cName: 'play',
          status: '默认',
          path: 'controller',
          width: 194,
          height: 160,
          flag: 0
        }, {
          name: 'play/wave_play_16',
          cName: 'play',
          status: '默认',
          path: 'controller',
          width: 194,
          height: 160,
          flag: 0
        }, {
          name: 'play/wave_play_17',
          cName: 'play',
          status: '默认',
          path: 'controller',
          width: 194,
          height: 160,
          flag: 0
        }, {
          name: 'play/wave_play_18',
          cName: 'play',
          status: '默认',
          path: 'controller',
          width: 194,
          height: 160,
          flag: 0
        }, {
          name: 'play/wave_play_19',
          cName: 'play',
          status: '默认',
          path: 'controller',
          width: 194,
          height: 160,
          flag: 0
        }, {
          name: 'play/wave_play_20',
          cName: 'play',
          status: '默认',
          path: 'controller',
          width: 194,
          height: 160,
          flag: 0
        }, {
          name: 'background_category',
          cName: '分类底框',
          status: '正常',
          path: 'controller',
          width: 237,
          height: 97,
          flag: 0
        }, {
          name: 'background_category_pressed',
          cName: '分类底框',
          status: '点击',
          path: 'controller',
          width: 237,
          height: 97,
          flag: 0
        }, {
          name: 'background_preference_selected',
          cName: '分类底框',
          status: '已选',
          path: 'controller',
          width: 237,
          height: 97,
          flag: 0
        }, {
          name: 'dialog_bg_middle',
          cName: '弹框小-底框',
          status: '',
          path: 'controller',
          width: 560,
          height: 263,
          flag: 0
        }, {
          name: 'divide_line',
          cName: '弹框小-横分割线',
          status: '',
          path: 'controller',
          width: 560,
          height: 2,
          flag: 0
        }, {
          name: 'divide_vertical',
          cName: '弹框通用-竖分割线',
          status: '',
          path: 'controller',
          width: 2,
          height: 71,
          flag: 0
        }, {
          name: 'dialog_bg_button',
          cName: '弹框小-小按钮点击',
          status: '',
          path: 'controller',
          width: 279,
          height: 74,
          flag: 0
        }, {
          name: 'dialog_bg_button_long',
          cName: '弹框小-大按钮点击',
          status: '',
          path: 'controller',
          width: 560,
          height: 74,
          flag: 0
        }, {
          name: 'bg_dialog_middle',
          cName: '弹框中-底框',
          status: '',
          path: 'controller',
          width: 654,
          height: 371,
          flag: 0
        }, {
          name: 'bg_dialog_big',
          cName: '弹窗框-大',
          status: '',
          path: 'controller',
          width: 654,
          height: 419,
          flag: 0
        }, {
          name: 'horizontal_divider_line',
          cName: '弹框大-横分割线',
          status: '',
          path: 'controller',
          width: 654,
          height: 2,
          flag: 0
        }, {
          name: 'bg_button_big',
          cName: '弹框大-小按钮点击',
          status: '',
          path: 'controller',
          width: 326,
          height: 74,
          flag: 0
        }, {
          name: 'bg_button_big_long',
          cName: '弹框大-大按钮点击',
          status: '',
          path: 'controller',
          width: 654,
          height: 74,
          flag: 0
        }, {
          name: 'bg_dialog_small',
          cName: 'toast',
          status: '默认',
          path: 'controller',
          width: 557,
          height: 183,
          flag: 0
        }, {
          name: 'bg_item_select',
          cName: '二级导航栏选中',
          status: '默认',
          path: 'controller',
          width: 244,
          height: 241
        }, {
          name: 'bg_main_item_select.9',
          cName: '二级导航栏选中',
          status: '默认',
          path: 'controller',
          width: 142,
          height: 92
        }, {
          name: 'bg_menu_select',
          cName: '二级导航栏选中',
          status: '默认',
          path: 'controller',
          width: 245,
          height: 42
        }, {
          name: 'bg_main_left_tab',
          cName: '二级导航栏',
          status: '默认',
          path: 'controller',
          width: 243,
          height: 704,
          flag: 0
        }, {
          name: 'btn_off',
          cName: '开关-关',
          status: '默认',
          path: 'controller',
          width: 137,
          height: 56,
          flag: 0
        }, {
          name: 'btn_on',
          cName: '开关-开',
          status: '默认',
          path: 'controller',
          width: 137,
          height: 56,
          flag: 0
        }, {
          name: 'navi_back',
          cName: '返回',
          status: '默认',
          path: 'controller',
          width: 50,
          height: 50,
          flag: 0
        }, {
          name: 'navi_bg_left.9',
          cName: '全家导航栏',
          status: '默认',
          path: 'controller',
          width: 167,
          height: 496,
          flag: 0
        }, {
          name: 'navi_bg_right.9',
          cName: '全家导航栏',
          status: '默认',
          path: 'controller',
          width: 12,
          height: 496,
          flag: 0
        }, {
          name: 'navi_home',
          cName: '主页',
          status: '默认',
          path: 'controller',
          width: 50,
          height: 50,
          flag: 0
        }],
        servicePics: [{
          name: 'bg_car',
          cName: '分类图标-车辆',
          status: '默认',
          path: 'service',
          width: 250,
          height: 378,
          flag: 0
        }, {
          name: 'bg_food',
          cName: '分类图标-美食',
          status: '默认',
          path: 'service',
          width: 250,
          height: 378,
          flag: 0
        }, {
          name: 'bg_movie',
          cName: '分类图标-电影',
          status: '默认',
          path: 'service',
          width: 250,
          height: 378,
          flag: 0
        }, {
          name: 'bg_hotel',
          cName: '分类图标-酒店',
          status: '默认',
          path: 'service',
          width: 250,
          height: 378,
          flag: 0
        }, {
          name: 'bg_scenic',
          cName: '分类图标-景点',
          status: '默认',
          path: 'service',
          width: 250,
          height: 378,
          flag: 0
        }],
        voicePics: [{
          name: 'bg_common',
          uploadName: 'Common/bg_common',
          cName: '通用背景',
          status: '默认',
          path: 'voice',
          width: 1280,
          height: 720,
          flag: 0
        }, {
          name: 'btn_collect_n',
          cName: '收藏',
          status: '正常',
          path: 'voice',
          width: 108,
          height: 108,
          flag: 0
        }, {
          name: 'btn_collect_p',
          cName: '收藏',
          status: '点击',
          path: 'voice',
          width: 108,
          height: 108,
          flag: 0
        }, {
          name: 'btn_collect_s',
          cName: '收藏',
          status: '已收藏',
          path: 'voice',
          width: 108,
          height: 108,
          flag: 0
        }, {
          name: 'btn_collect_disabled',
          cName: '收藏',
          status: '不可收藏',
          path: 'voice',
          width: 108,
          height: 108,
          flag: 0
        },

          // {
          // name: 'bg_card_s',
          // cName: '正在播放',
          // status: '默认',
          // path: 'voice',
          // width: 360,
          // height: 394,
          // flag: 0
          // },

          {
            name: 'btn_list_disabled',
            cName: '播放列表',
            status: '不可点击',
            path: 'voice',
            width: 108,
            height: 108,
            flag: 0
          }, {
            name: 'btn_list_n',
            cName: '播放列表',
            status: '正常',
            path: 'voice',
            width: 108,
            height: 108,
            flag: 0
          }, {
            name: 'btn_list_p',
            cName: '播放列表',
            status: '不可点击',
            path: 'voice',
            width: 108,
            height: 108,
            flag: 0
          }, {
            name: 'btn_next_disabled',
            cName: '下一曲',
            status: '不可点击',
            path: 'voice',
            width: 108,
            height: 108,
            flag: 0
          }, {
            name: 'btn_next_n',
            cName: '下一曲',
            status: '正常',
            path: 'voice',
            width: 108,
            height: 108,
            flag: 0
          }, {
            name: 'btn_next_p',
            cName: '下一曲',
            status: '点击',
            path: 'voice',
            width: 108,
            height: 108,
            flag: 0
          }, {
            name: 'btn_pause_disabled',
            cName: '暂停',
            status: '不可点击',
            path: 'voice',
            width: 108,
            height: 108,
            flag: 0
          }, {
            name: 'btn_pause_n',
            cName: '下一曲',
            status: '正常',
            path: 'voice',
            width: 108,
            height: 108,
            flag: 0
          }, {
            name: 'btn_pause_p',
            cName: '下一曲',
            status: '点击',
            path: 'voice',
            width: 108,
            height: 108,
            flag: 0
          }, {
            name: 'btn_play_disabled',
            cName: '播放',
            status: '不可点击',
            path: 'voice',
            width: 108,
            height: 108,
            flag: 0
          }, {
            name: 'btn_play_n',
            cName: '播放',
            status: '正常',
            path: 'voice',
            width: 108,
            height: 108,
            flag: 0
          }, {
            name: 'btn_play_p',
            cName: '播放',
            status: '点击',
            path: 'voice',
            width: 108,
            height: 108,
            flag: 0
          }, {
            name: 'btn_previous_disabled',
            cName: '上一曲',
            status: '不可点击',
            path: 'voice',
            width: 108,
            height: 108,
            flag: 0
          }, {
            name: 'btn_previous_n',
            cName: '上一曲',
            status: '正常',
            path: 'voice',
            width: 108,
            height: 108,
            flag: 0
          }, {
            name: 'btn_previous_p',
            cName: '上一曲',
            status: '点击',
            path: 'voice',
            width: 108,
            height: 108,
            flag: 0
          }, {
            name: 'player_pic_none',
            cName: '专辑封面',
            status: '默认',
            path: 'voice',
            width: 94,
            height: 94,
            flag: 0
          }, {
            name: 'bg_service_car_warn',
            cName: '分类配图状态底图',
            status: '默认',
            path: 'voice',
            width: 151,
            height: 60,
            flag: 0
          }, {
            name: 'connect_n',
            cName: '状态指示',
            status: '已连接',
            path: 'voice',
            width: 12,
            height: 12,
            flag: 0
          }, {
            name: 'unconnect_n',
            cName: '状态指示',
            status: '未连接',
            path: 'voice',
            width: 12,
            height: 12,
            flag: 0
          }, {
            name: 'icon_car_red',
            cName: '状态提示',
            status: '默认',
            path: 'voice',
            width: 12,
            height: 12,
            flag: 0
          }, {
            name: 'recommend_00',
            cName: '导航icon',
            status: '',
            path: 'voice',
            width: 224,
            height: 112,
            flag: 0
          }, {
            name: 'recommend_01',
            cName: '导航icon',
            status: '',
            path: 'voice',
            width: 224,
            height: 112,
            flag: 0
          }, {
            name: 'recommend_02',
            cName: '导航icon',
            status: '',
            path: 'voice',
            width: 224,
            height: 112,
            flag: 0
          }, {
            name: 'recommend_03',
            cName: '导航icon',
            status: '',
            path: 'voice',
            width: 224,
            height: 112,
            flag: 0
          }, {
            name: 'recommend_04',
            cName: '导航icon',
            status: '',
            path: 'voice',
            width: 224,
            height: 112,
            flag: 0
          }, {
            name: 'recommend_05',
            cName: '导航icon',
            status: '',
            path: 'voice',
            width: 224,
            height: 112,
            flag: 0
          }, {
            name: 'recommend_06',
            cName: '导航icon',
            status: '',
            path: 'voice',
            width: 224,
            height: 112,
            flag: 0
          }, {
            name: 'recommend_07',
            cName: '导航icon',
            status: '',
            path: 'voice',
            width: 224,
            height: 112,
            flag: 0
          }, {
            name: 'recommend_08',
            cName: '导航icon',
            status: '',
            path: 'voice',
            width: 224,
            height: 112,
            flag: 0
          }, {
            name: 'recommend_09',
            cName: '导航icon',
            status: '',
            path: 'voice',
            width: 224,
            height: 112,
            flag: 0
          }, {
            name: 'recommend_10',
            cName: '导航icon',
            status: '',
            path: 'voice',
            width: 224,
            height: 112,
            flag: 0
          }, {
            name: 'recommend_11',
            cName: '导航icon',
            status: '',
            path: 'voice',
            width: 224,
            height: 112,
            flag: 0
          }, {
            name: 'recommend_12',
            cName: '导航icon',
            status: '',
            path: 'voice',
            width: 224,
            height: 112,
            flag: 0
          }, {
            name: 'recommend_13',
            cName: '导航icon',
            status: '',
            path: 'voice',
            width: 224,
            height: 112,
            flag: 0
          }, {
            name: 'recommend_14',
            cName: '导航icon',
            status: '',
            path: 'voice',
            width: 224,
            height: 112,
            flag: 0
          }, {
            name: 'recommend_15',
            cName: '导航icon',
            status: '',
            path: 'voice',
            width: 224,
            height: 112,
            flag: 0
          }, {
            name: 'music_00',
            cName: '导航icon',
            status: '',
            path: 'voice',
            width: 224,
            height: 112,
            flag: 0
          }, {
            name: 'music_01',
            cName: '导航icon',
            status: '',
            path: 'voice',
            width: 224,
            height: 112,
            flag: 0
          }, {
            name: 'music_02',
            cName: '导航icon',
            status: '',
            path: 'voice',
            width: 224,
            height: 112,
            flag: 0
          }, {
            name: 'music_03',
            cName: '导航icon',
            status: '',
            path: 'voice',
            width: 224,
            height: 112,
            flag: 0
          }, {
            name: 'music_04',
            cName: '导航icon',
            status: '',
            path: 'voice',
            width: 224,
            height: 112,
            flag: 0
          }, {
            name: 'music_05',
            cName: '导航icon',
            status: '',
            path: 'voice',
            width: 224,
            height: 112,
            flag: 0
          }, {
            name: 'music_06',
            cName: '导航icon',
            status: '',
            path: 'voice',
            width: 224,
            height: 112,
            flag: 0
          }, {
            name: 'music_07',
            cName: '导航icon',
            status: '',
            path: 'voice',
            width: 224,
            height: 112,
            flag: 0
          }, {
            name: 'music_08',
            cName: '导航icon',
            status: '',
            path: 'voice',
            width: 224,
            height: 112,
            flag: 0
          }, {
            name: 'music_09',
            cName: '导航icon',
            status: '',
            path: 'voice',
            width: 224,
            height: 112,
            flag: 0
          }, {
            name: 'music_10',
            cName: '导航icon',
            status: '',
            path: 'voice',
            width: 224,
            height: 112,
            flag: 0
          }, {
            name: 'music_11',
            cName: '导航icon',
            status: '',
            path: 'voice',
            width: 224,
            height: 112,
            flag: 0
          }, {
            name: 'music_12',
            cName: '导航icon',
            status: '',
            path: 'voice',
            width: 224,
            height: 112,
            flag: 0
          }, {
            name: 'music_13',
            cName: '导航icon',
            status: '',
            path: 'voice',
            width: 224,
            height: 112,
            flag: 0
          }, {
            name: 'music_14',
            cName: '导航icon',
            status: '',
            path: 'voice',
            width: 224,
            height: 112,
            flag: 0
          }, {
            name: 'music_15',
            cName: '导航icon',
            status: '',
            path: 'voice',
            width: 224,
            height: 112,
            flag: 0
          }, {
            name: 'service_00',
            cName: '导航icon',
            status: '',
            path: 'voice',
            width: 224,
            height: 112,
            flag: 0
          }, {
            name: 'service_01',
            cName: '导航icon',
            status: '',
            path: 'voice',
            width: 224,
            height: 112,
            flag: 0
          }, {
            name: 'service_02',
            cName: '导航icon',
            status: '',
            path: 'voice',
            width: 224,
            height: 112,
            flag: 0
          }, {
            name: 'service_03',
            cName: '导航icon',
            status: '',
            path: 'voice',
            width: 224,
            height: 112,
            flag: 0
          }, {
            name: 'service_04',
            cName: '导航icon',
            status: '',
            path: 'voice',
            width: 224,
            height: 112,
            flag: 0
          }, {
            name: 'service_05',
            cName: '导航icon',
            status: '',
            path: 'voice',
            width: 224,
            height: 112,
            flag: 0
          }, {
            name: 'service_06',
            cName: '导航icon',
            status: '',
            path: 'voice',
            width: 224,
            height: 112,
            flag: 0
          }, {
            name: 'service_07',
            cName: '导航icon',
            status: '',
            path: 'voice',
            width: 224,
            height: 112,
            flag: 0
          }, {
            name: 'service_08',
            cName: '导航icon',
            status: '',
            path: 'voice',
            width: 224,
            height: 112,
            flag: 0
          }, {
            name: 'service_09',
            cName: '导航icon',
            status: '',
            path: 'voice',
            width: 224,
            height: 112,
            flag: 0
          }, {
            name: 'service_10',
            cName: '导航icon',
            status: '',
            path: 'voice',
            width: 224,
            height: 112,
            flag: 0
          }, {
            name: 'service_11',
            cName: '导航icon',
            status: '',
            path: 'voice',
            width: 224,
            height: 112,
            flag: 0
          }, {
            name: 'service_12',
            cName: '导航icon',
            status: '',
            path: 'voice',
            width: 224,
            height: 112,
            flag: 0
          }, {
            name: 'service_13',
            cName: '导航icon',
            status: '',
            path: 'voice',
            width: 224,
            height: 112,
            flag: 0
          }, {
            name: 'service_14',
            cName: '导航icon',
            status: '',
            path: 'voice',
            width: 224,
            height: 112,
            flag: 0
          }, {
            name: 'service_15',
            cName: '导航icon',
            status: '',
            path: 'voice',
            width: 224,
            height: 112,
            flag: 0
          }, {
            name: 'app_00',
            cName: '导航icon',
            status: '',
            path: 'voice',
            width: 224,
            height: 112,
            flag: 0
          }, {
            name: 'app_01',
            cName: '导航icon',
            status: '',
            path: 'voice',
            width: 224,
            height: 112,
            flag: 0
          }, {
            name: 'app_02',
            cName: '导航icon',
            status: '',
            path: 'voice',
            width: 224,
            height: 112,
            flag: 0
          }, {
            name: 'app_03',
            cName: '导航icon',
            status: '',
            path: 'voice',
            width: 224,
            height: 112,
            flag: 0
          }, {
            name: 'app_04',
            cName: '导航icon',
            status: '',
            path: 'voice',
            width: 224,
            height: 112,
            flag: 0
          }, {
            name: 'app_05',
            cName: '导航icon',
            status: '',
            path: 'voice',
            width: 224,
            height: 112,
            flag: 0
          }, {
            name: 'app_06',
            cName: '导航icon',
            status: '',
            path: 'voice',
            width: 224,
            height: 112,
            flag: 0
          }, {
            name: 'app_07',
            cName: '导航icon',
            status: '',
            path: 'voice',
            width: 224,
            height: 112,
            flag: 0
          }, {
            name: 'app_08',
            cName: '导航icon',
            status: '',
            path: 'voice',
            width: 224,
            height: 112,
            flag: 0
          }, {
            name: 'app_09',
            cName: '导航icon',
            status: '',
            path: 'voice',
            width: 224,
            height: 112,
            flag: 0
          }, {
            name: 'app_10',
            cName: '导航icon',
            status: '',
            path: 'voice',
            width: 224,
            height: 112,
            flag: 0
          }, {
            name: 'app_11',
            cName: '导航icon',
            status: '',
            path: 'voice',
            width: 224,
            height: 112,
            flag: 0
          }, {
            name: 'app_12',
            cName: '导航icon',
            status: '',
            path: 'voice',
            width: 224,
            height: 112,
            flag: 0
          }, {
            name: 'app_13',
            cName: '导航icon',
            status: '',
            path: 'voice',
            width: 224,
            height: 112,
            flag: 0
          }, {
            name: 'app_14',
            cName: '导航icon',
            status: '',
            path: 'voice',
            width: 224,
            height: 112,
            flag: 0
          }, {
            name: 'app_15',
            cName: '导航icon',
            status: '',
            path: 'voice',
            width: 224,
            height: 112,
            flag: 0
          }, {
            name: 'music_card_collect',
            cName: '分类图标',
            status: '默认',
            path: 'voice',
            width: 250,
            height: 282,
            flag: 0
          }, {
            name: 'music_card_music',
            cName: '分类图标',
            status: '默认',
            path: 'voice',
            width: 250,
            height: 282,
            flag: 0
          }, {
            name: 'music_card_radio',
            cName: '分类图标',
            status: '默认',
            path: 'voice',
            width: 250,
            height: 282,
            flag: 0
          }, {
            name: 'title_select',
            cName: '分类标题底图',
            status: '默认',
            path: 'voice',
            width: 240,
            height: 70,
            flag: 0
          }, {
            name: 'bg_service_tv',
            cName: '分类配图名称底图',
            status: '默认',
            path: 'voice',
            width: 250,
            height: 68,
            flag: 0
          }, {
            name: 'progress/seek_bar_block',
            cName: '播放进度条',
            status: '默认',
            path: 'voice',
            width: 8,
            height: 23,
            flag: 0
          }, {
            name: 'progress/seek_bar_left_fill',
            cName: '播放进度条',
            status: '默认',
            path: 'voice',
            width: 12,
            height: 23,
            flag: 0
          }, {
            name: 'progress/seek_bar_right_unfill',
            cName: '播放进度条',
            status: '默认',
            path: 'voice',
            width: 12,
            height: 23,
            flag: 0
          }, {
            name: 'progress/seek_bar_middle_fill.9',
            cName: '播放进度条',
            status: '默认',
            path: 'voice',
            width: 3,
            height: 25,
            flag: 0
          }, {
            name: 'progress/seek_bar_middle_unfill.9',
            cName: '播放进度条',
            status: '默认',
            path: 'voice',
            width: 3,
            height: 25,
            flag: 0
          },

          // {
          // name: 'progress/seek_bar_shadow.9',
          // cName: '播放进度条',
          // status: '默认',
          // path: 'voice',
          // width: 33,
          // height: 25,
          // flag: 0
          // },
//zt02
          {
            name: 'ic_back_btn',
            uploadName: 'ThemeStore/ic_back_btn',
            cName: '返回',
            status: '默认',
            path: 'icon/png',
            width: 32,
            height: 32,
            flag: 0,
            recommend: [
              {
                name: 'ic_back_btn_01',
                uploadName: 'ThemeStore/ic_back_btn',
                iconPath: 'recommend/01a.png',
                cName: '返回',
                status: '(推荐icon)',
                recommend: true,
                path: 'icon/png',
                width: 32,
                height: 32,
                flag: 0
              }, {
                name: 'ic_back_btn_02',
                uploadName: 'ThemeStore/ic_back_btn',
                iconPath: 'recommend/01b.png',
                cName: '返回',
                status: '(推荐icon)',
                recommend: true,
                path: 'icon/png',
                width: 32,
                height: 32,
                flag: 0
              }, {
                name: 'ic_back_btn_03',
                uploadName: 'ThemeStore/ic_back_btn',
                iconPath: 'recommend/01c.png',
                cName: '返回',
                status: '(推荐icon)',
                recommend: true,
                path: 'icon/png',
                width: 32,
                height: 32,
                flag: 0
              }
            ]
          },

          {
            name: 'ic_vehicle',
            uploadName: 'ThemeStore/ic_vehicle',
            cName: '中控主题',
            status: '选中',
            path: 'icon/png',
            width: 32,
            height: 32,
            flag: 0,
            recommend: [{
              name: 'ic_vehicle_01',
              uploadName: 'ThemeStore/ic_vehicle',
              iconPath: 'recommend/02a.png',
              cName: '中控主题',
              status: '(推荐icon)',
              path: 'icon/png',
              width: 32,
              height: 32,
              flag: 0
            }, {
              name: 'ic_vehicle_02',
              uploadName: 'ThemeStore/ic_vehicle',
              iconPath: 'recommend/02b.png',
              cName: '中控主题',
              status: '(推荐icon)',
              path: 'icon/png',
              width: 32,
              height: 32,
              flag: 0
            }, {
              name: 'ic_vehicle_03',
              uploadName: 'ThemeStore/ic_vehicle',
              iconPath: 'recommend/02c.png',
              cName: '中控主题',
              status: '(推荐icon)',
              path: 'icon/png',
              width: 32,
              height: 32,
              flag: 0
            },
            ]
          },

          {
            name: 'ic_vehicle_unselected',
            uploadName: 'ThemeStore/ic_vehicle_unselected',
            cName: '中控主题',
            status: '默认',
            path: 'icon/png',
            width: 32,
            height: 32,
            flag: 0
          },


          {
            name: 'ic_instrument',
            uploadName: 'ThemeStore/ic_instrument',
            cName: '仪表盘',
            status: '选中',
            path: 'icon/png',
            width: 32,
            height: 32,
            flag: 0,
            recommend: [{
              name: 'ic_instrument_01',
              uploadName: 'ThemeStore/ic_instrument',
              iconPath: 'recommend/03a.png',
              cName: '仪表盘',
              status: '(推荐icon)',
              path: 'icon/png',
              width: 32,
              height: 32,
              flag: 0
            }, {
              name: 'ic_instrument_02',
              uploadName: 'ThemeStore/ic_instrument',
              iconPath: 'recommend/03b.png',
              cName: '仪表盘',
              status: '(推荐icon)',
              path: 'icon/png',
              width: 32,
              height: 32,
              flag: 0
            }, {
              name: 'ic_instrument_03',
              uploadName: 'ThemeStore/ic_instrument',
              iconPath: 'recommend/03c.png',
              cName: '仪表盘',
              status: '(推荐icon)',
              path: 'icon/png',
              width: 32,
              height: 32,
              flag: 0
            }]
          },

          {
            name: 'ic_instrument_unselected',
            uploadName: 'ThemeStore/ic_instrument_unselected',
            cName: '仪表盘',
            status: '默认',
            path: 'icon/png',
            width: 32,
            height: 32,
            flag: 0
          },


          {
            name: 'ic_my_purchase_unselected',
            uploadName: 'ThemeStore/ic_my_purchase_unselected',
            cName: '我的购买',
            status: '选中',
            path: 'icon/png',
            width: 32,
            height: 32,
            flag: 0
          },

          {
            name: 'ic_my_purchase',
            uploadName: 'ThemeStore/ic_my_purchase',
            cName: '我的购买',
            status: '默认',
            path: 'icon/png',
            width: 32,
            height: 32,
            flag: 0,
            recommend: [{
              name: 'ic_my_purchase_01',
              uploadName: 'ThemeStore/ic_my_purchase',
              iconPath: 'recommend/10a.png',
              cName: '我的购买',
              status: '(推荐icon)',
              path: 'icon/png',
              width: 32,
              height: 32,
              flag: 0
            }, {
              name: 'ic_my_purchase_02',
              uploadName: 'ThemeStore/ic_my_purchase',
              iconPath: 'recommend/10b.png',
              cName: '我的购买',
              status: '(推荐icon)',
              path: 'icon/png',
              width: 32,
              height: 32,
              flag: 0
            }, {
              name: 'ic_my_purchase_03',
              uploadName: 'ThemeStore/ic_my_purchase',
              iconPath: 'recommend/10c.png',
              cName: '我的购买',
              status: '(推荐icon)',
              path: 'icon/png',
              width: 32,
              height: 32,
              flag: 0
            }]
          },


          {
            name: 'ic_my_favourite',
            uploadName: 'ThemeStore/ic_my_favourite',
            cName: '我的收藏',
            status: '选中',
            path: 'icon/png',
            width: 28,
            height: 25,
            flag: 0,
            recommend: [{
              name: 'ic_my_favourite_01',
              uploadName: 'ThemeStore/ic_my_favourite',
              iconPath: 'recommend/08a.png',
              cName: '我的收藏',
              status: '(推荐icon)',
              path: 'icon/png',
              width: 28,
              height: 25,
              flag: 0
            }, {
              name: 'ic_my_favourite_02',
              uploadName: 'ThemeStore/ic_my_favourite',
              iconPath: 'recommend/08b.png',
              cName: '我的收藏',
              status: '(推荐icon)',
              path: 'icon/png',
              width: 28,
              height: 25,
              flag: 0
            }, {
              name: 'ic_my_favourite_03',
              uploadName: 'ThemeStore/ic_my_favourite',
              iconPath: 'recommend/08c.png',
              cName: '我的收藏',
              status: '(推荐icon)',
              path: 'icon/png',
              width: 28,
              height: 25,
              flag: 0
            }]
          },

          {
            name: 'ic_my_favourite_unselected',
            uploadName: 'ThemeStore/ic_my_favourite_unselected',
            cName: '我的收藏',
            status: '默认',
            path: 'icon/png',
            width: 28,
            height: 25,
            flag: 0
          },


          {
            name: 'ic_my_downloaded',
            uploadName: 'ThemeStore/ic_my_downloaded',
            cName: '已下载',
            status: '选中',
            path: 'icon/png',
            width: 32,
            height: 32,
            flag: 0,
            recommend: [{
              name: 'ic_my_downloaded_01',
              uploadName: 'ThemeStore/ic_my_downloaded',
              iconPath: 'recommend/11a.png',
              cName: '已下载',
              status: '(推荐icon)',
              path: 'icon/png',
              width: 32,
              height: 32,
              flag: 0
            }, {
              name: 'ic_my_downloaded_02',
              uploadName: 'ThemeStore/ic_my_downloaded',
              iconPath: 'recommend/11b.png',
              cName: '已下载',
              status: '(推荐icon)',
              path: 'icon/png',
              width: 32,
              height: 32,
              flag: 0
            }, {
              name: 'ic_my_downloaded_03',
              uploadName: 'ThemeStore/ic_my_downloaded',
              iconPath: 'recommend/11c.png',
              cName: '已下载',
              status: '(推荐icon)',
              path: 'icon/png',
              width: 32,
              height: 32,
              flag: 0
            }]
          },

          {
            name: 'ic_my_downloaded_unselected',
            uploadName: 'ThemeStore/ic_my_downloaded_unselected',
            cName: '已下载',
            status: '默认',
            path: 'icon/png',
            width: 32,
            height: 32,
            flag: 0
          },


          {
            name: 'ic_search',
            uploadName: 'ThemeStore/ic_search',
            cName: '搜索',
            status: '默认',
            path: 'icon/png',
            width: 32,
            height: 32,
            flag: 0,
            recommend: [{
              name: 'ic_search_01',
              uploadName: 'ThemeStore/ic_search',
              iconPath: 'recommend/04a.png',
              cName: '搜索',
              status: '(推荐icon)',
              path: 'icon/png',
              width: 32,
              height: 32,
              flag: 0
            }, {
              name: 'ic_search_02',
              uploadName: 'ThemeStore/ic_search',
              iconPath: 'recommend/04b.png',
              cName: '搜索',
              status: '(推荐icon)',
              path: 'icon/png',
              width: 32,
              height: 32,
              flag: 0
            }, {
              name: 'ic_search_03',
              uploadName: 'ThemeStore/ic_search',
              iconPath: 'recommend/04c.png',
              cName: '搜索',
              status: '(推荐icon)',
              path: 'icon/png',
              width: 32,
              height: 32,
              flag: 0
            }]
          },
          {
            name: 'ic_user_center',
            uploadName: 'ThemeStore/ic_user_center',
            cName: '我的',
            status: '默认',
            path: 'icon/png',
            width: 32,
            height: 32,
            flag: 0,
            recommend: [{
              name: 'ic_user_center01',
              uploadName: 'ThemeStore/ic_user_center',
              iconPath: 'recommend/05a.png',
              cName: '我的',
              status: '(推荐icon)',
              path: 'icon/png',
              width: 32,
              height: 32,
              flag: 0
            }, {
              name: 'ic_user_center02',
              uploadName: 'ThemeStore/ic_user_center',
              iconPath: 'recommend/05b.png',
              cName: '我的',
              status: '(推荐icon)',
              path: 'icon/png',
              width: 32,
              height: 32,
              flag: 0
            }, {
              name: 'ic_user_center03',
              uploadName: 'ThemeStore/ic_user_center',
              iconPath: 'recommend/05c.png',
              cName: '我的',
              status: '(推荐icon)',
              path: 'icon/png',
              width: 32,
              height: 32,
              flag: 0
            }]
          },

          {
            name: 'ic_refresh',
            uploadName: 'ThemeStore/ic_refresh',
            cName: '刷新',
            status: '默认',
            path: 'icon/png',
            width: 30,
            height: 22,
            flag: 0,
            recommend: [{
              name: 'ic_refresh_01',
              uploadName: 'ThemeStore/ic_refresh',
              iconPath: 'recommend/06a.png',
              cName: '刷新',
              status: '(推荐icon)',
              path: 'icon/png',
              width: 30,
              height: 22,
              flag: 0
            }, {
              name: 'ic_refresh_02',
              uploadName: 'ThemeStore/ic_refresh',
              iconPath: 'recommend/06b.png',
              cName: '刷新',
              status: '(推荐icon)',
              path: 'icon/png',
              width: 30,
              height: 22,
              flag: 0
            }, {
              name: 'ic_refresh_03',
              uploadName: 'ThemeStore/ic_refresh',
              iconPath: 'recommend/06c.png',
              cName: '刷新',
              status: '(推荐icon)',
              path: 'icon/png',
              width: 30,
              height: 22,
              flag: 0
            }]
          },

          {
            name: 'ic_delete',
            uploadName: 'ThemeStore/ic_delete',
            cName: '删除',
            status: '默认',
            path: 'icon/png',
            width: 32,
            height: 32,
            flag: 0,
            recommend: [{
              name: 'ic_delete_01',
              uploadName: 'ThemeStore/ic_delete',
              iconPath: 'recommend/07a.png',
              cName: '删除',
              status: '(推荐icon)',
              path: 'icon/png',
              width: 32,
              height: 32,
              flag: 0
            }, {
              name: 'ic_delete_02',
              uploadName: 'ThemeStore/ic_delete',
              iconPath: 'recommend/07b.png',
              cName: '删除',
              status: '(推荐icon)',
              path: 'icon/png',
              width: 32,
              height: 32,
              flag: 0
            }, {
              name: 'ic_delete_03',
              uploadName: 'ThemeStore/ic_delete',
              iconPath: 'recommend/07c.png',
              cName: '删除',
              status: '(推荐icon)',
              path: 'icon/png',
              width: 32,
              height: 32,
              flag: 0
            }]
          },


          {
            name: 'ic_text_field_search',
            uploadName: 'ThemeStore/ic_text_field_search',
            cName: '搜索',
            status: '默认',
            path: 'icon/png',
            width: 32,
            height: 32,
            flag: 0
          },

          {
            name: 'ic_full_screen',
            uploadName: 'ThemeStore/ic_full_screen',
            cName: '预览',
            status: '默认',
            path: 'icon/png',
            width: 32,
            height: 32,
            flag: 0,
            recommend: [{
              name: 'ic_full_screen_01',
              uploadName: 'ThemeStore/ic_full_screen',
              iconPath: 'recommend/09a.png',
              cName: '预览',
              status: '(推荐icon)',
              path: 'icon/png',
              width: 32,
              height: 32,
              flag: 0
            }, {
              name: 'ic_full_screen_02',
              uploadName: 'ThemeStore/ic_full_screen',
              iconPath: 'recommend/09b.png',
              cName: '预览',
              status: '(推荐icon)',
              path: 'icon/png',
              width: 32,
              height: 32,
              flag: 0
            }, {
              name: 'ic_full_screen_03',
              uploadName: 'ThemeStore/ic_full_screen',
              iconPath: 'recommend/09c.png',
              cName: '预览',
              status: '(推荐icon)',
              path: 'icon/png',
              width: 32,
              height: 32,
              flag: 0
            }]
          },

          {
            name: 'ic_my_like',
            uploadName: 'ThemeStore/ic_my_like',
            cName: '收藏',
            status: '选中',
            path: 'icon/png',
            width: 32,
            height: 32,
            flag: 0,
            recommend: [{
              name: 'ic_my_like_01',
              uploadName: 'ThemeStore/ic_my_like',
              iconPath: 'recommend/08a.png',
              cName: '收藏',
              status: '(推荐icon)',
              path: 'icon/png',
              width: 32,
              height: 32,
              flag: 0
            }, {
              name: 'ic_my_like_02',
              uploadName: 'ThemeStore/ic_my_like',
              iconPath: 'recommend/08b.png',
              cName: '收藏',
              status: '(推荐icon)',
              path: 'icon/png',
              width: 32,
              height: 32,
              flag: 0
            }, {
              name: 'ic_my_like_03',
              uploadName: 'ThemeStore/ic_my_like',
              iconPath: 'recommend/08c.png',
              cName: '收藏',
              status: '(推荐icon)',
              path: 'icon/png',
              width: 32,
              height: 32,
              flag: 0
            }]
          },

          {
            name: 'ic_my_like_unselected',
            uploadName: 'ThemeStore/ic_my_like_unselected',
            cName: '收藏',
            status: '默认',
            path: 'icon/png',
            width: 28,
            height: 25,
            flag: 0
          },

          {
            name: 'ic_themes_delete',
            uploadName: 'ThemeStore/ic_themes_delete',
            cName: '删除',
            status: '默认',
            path: 'icon/png',
            width: 32,
            height: 32,
            flag: 0
          },

          {
            name: 'ic_select',
            uploadName: 'ThemeStore/ic_select',
            cName: '选择',
            status: '选中',
            path: 'icon/png',
            width: 48,
            height: 48,
            flag: 0
          },

          {
            name: 'ic_select_unselected',
            uploadName: 'ThemeStore/ic_select_unselected',
            cName: '选择',
            status: '默认',
            path: 'icon/png',
            width: 48,
            height: 48,
            flag: 0
          },

          // 首页
          {
            name: 'arrow0',
            uploadName: 'Launcher/arrow0',
            cName: '前进',
            status: '默认',
            path: 'icon/png_index',
            width: 83,
            height: 84,
            flag: 0
          }, {
            name: 'arrow3',
            uploadName: 'Launcher/arrow3',
            cName: '右转',
            status: '默认',
            path: 'icon/png_index',
            width: 84,
            height: 84,
            flag: 0
          }, {
            name: 'ic_auto_dest',
            uploadName: 'Launcher/ic_auto_dest',
            cName: '目的地搜索',
            status: '默认',
            path: 'icon/png_index',
            width: 30,
            height: 30,
            flag: 0
          }, {
            name: 'prev',
            uploadName: 'Launcher/prev',
            cName: '上一曲',
            status: '默认',
            path: 'icon/png_index',
            width: 40,
            height: 40,
            flag: 0
          }, {
            name: 'pause_icon',
            uploadName: 'Launcher/pause_icon',
            cName: '暂停',
            status: '默认',
            path: 'icon/png_index',
            width: 40,
            height: 40,
            flag: 0
          }, {
            name: 'next',
            uploadName: 'Launcher/next',
            cName: '下一曲',
            status: '默认',
            path: 'icon/png_index',
            width: 40,
            height: 40,
            flag: 0
          }, {
            name: 'bt_phone_center_icon',
            uploadName: 'Launcher/bt_phone_center_icon',
            cName: '电话',
            status: '默认',
            path: 'icon/png_index',
            width: 120,
            height: 120,
            flag: 0
          }, {
            name: 'Component 15',
            uploadName: 'LauncherTmp/Component 15',
            cName: '电台',
            status: '默认',
            path: 'icon/png_index',
            width: 120,
            height: 120,
            flag: 0
          }, {
            name: 'videophoto_widget_photo_icon',
            uploadName: 'Launcher/videophoto_widget_photo_icon',
            cName: '视频图片',
            status: '默认',
            path: 'icon/png_index',
            width: 120,
            height: 120,
            flag: 0
          }, {
            name: 'ic_settings_new',
            uploadName: 'Launcher/ic_settings_new',
            cName: '设置',
            status: '默认',
            path: 'icon/png_index',
            width: 120,
            height: 120,
            flag: 0
          }, {
            name: 'pcenter',
            uploadName: 'Launcher/pcenter',
            cName: '个人中心',
            status: '默认',
            path: 'icon/png_index',
            width: 120,
            height: 120,
            flag: 0
          }, {
            name: 'dvr_widget_icon',
            uploadName: 'Launcher/dvr_widget_icon',
            cName: '行车记录仪',
            status: '默认',
            path: 'icon/png_index',
            width: 120,
            height: 120,
            flag: 0
          }, {
            name: 'dvr_photo_normal',
            uploadName: 'Launcher/dvr_photo_normal',
            cName: '拍照',
            status: '默认',
            path: 'icon/png_index',
            width: 40,
            height: 40,
            flag: 0
          }, {
            name: 'dvr_record_normal',
            uploadName: 'Launcher/dvr_record_normal',
            cName: '摄像',
            status: '默认',
            path: 'icon/png_index',
            width: 40,
            height: 40,
            flag: 0
          }, {
            name: 'more_card_center_icon',
            uploadName: 'Launcher/more_card_center_icon',
            cName: '更多',
            status: '默认',
            path: 'icon/png_index',
            width: 120,
            height: 120,
            flag: 0
          }, {
            name: 'manual_center',
            uploadName: 'Launcher/manual_center',
            cName: '用户手册',
            status: '默认',
            path: 'icon/png_index',
            width: 120,
            height: 120,
            flag: 0
          }, {
            name: 'oil_center',
            uploadName: 'Launcher/oil_center',
            cName: '智慧加油',
            status: '默认',
            path: 'icon/png_index',
            width: 120,
            height: 120,
            flag: 0
          }, {
            name: 'bt_phone_search_ico',
            uploadName: 'Launcher/bt_phone_search_ico',
            cName: '搜索联系人',
            status: '默认',
            path: 'icon/png_index',
            width: 31,
            height: 30,
            flag: 0
          }, {
            name: 'arrow15',
            uploadName: 'Launcher/arrow15',
            cName: '直行',
            status: '默认',
            path: 'icon/png_index',
            width: 84,
            height: 84,
            flag: 0
          },
          // 首页背景图标
        {
          name: 'index_tab_bg',
          uploadName: 'Launcher/index_tab_bg',
          cName: '背景',
          status: '选中',
          path: 'icon/png_index',
          width: 300,
          height: 454,
          flag: 0
        },  {
          name: 'phone_out_card',
          uploadName: 'Launcher/phone_out_card',
          cName: '电话背景',
          status: '选中',
          path: 'icon/png_index',
          width: 300,
          height: 454,
          flag: 0
        }, {
          name: 'personal_center_out_card',
          uploadName: 'Launcher/personal_center_out_card',
          cName: '个人中心背景',
          status: '选中',
          path: 'icon/png_index',
          width: 300,
          height: 454,
          flag: 0
        }, {
          name: 'more_out_card',
          uploadName: 'Launcher/more_out_card',
          cName: '更多背景',
          status: '选中',
          path: 'icon/png_index',
          width: 300,
          height: 454,
          flag: 0
        }, {
          name: 'settings_out_card',
          uploadName: 'Launcher/settings_out_card',
          cName: '设置背景',
          status: '选中',
          path: 'icon/png_index',
          width: 300,
          height: 454,
          flag: 0
        }, {
          name: 'picture_video_out_card',
          uploadName: 'Launcher/picture_video_out_card',
          cName: '视频图片背景',
          status: '选中',
          path: 'icon/png_index',
          width: 300,
          height: 454,
          flag: 0
        }, {
          name: 'online_music_out_card',
          uploadName: 'Launcher/online_music_out_card',
          cName: '音乐背景',
          status: '选中',
          path: 'icon/png_index',
          width: 300,
          height: 454,
          flag: 0
        }, {
          name: 'oil_internet_out_card',
          uploadName: 'Launcher/oil_internet_out_card',
          cName: '智慧加油背景',
          status: '选中',
          path: 'icon/png_index',
          width: 300,
          height: 454,
          flag: 0
        },

          // 音乐
          {
            name: 'defaultablumpic',
            uploadName: 'UsbMedia/defaultablumpic',
            cName: '音乐',
            status: '默认',
            path: 'icon/png_music',
            width: 231,
            height: 231,
            flag: 0
          }, {
            name: 'filter',
            uploadName: 'UsbMedia/filter',
            cName: '过滤',
            status: '默认',
            path: 'icon/png_music',
            width: 48,
            height: 48,
            flag: 0
          }, {
            name: 'ic_bw1',
            uploadName: 'UsbMedia/ic_bw1',
            cName: '音波',
            status: '默认',
            path: 'icon/png_music',
            width: 820,
            height: 108,
            flag: 0
          }, {
            name: 'ic_k_radio',
            uploadName: 'UsbMedia/ic_k_radio',
            cName: '智行电台',
            status: '默认',
            path: 'icon/png_music',
            width: 52,
            height: 52,
            flag: 0
          }, {
            name: 'ic_k_radio_down',
            uploadName: 'UsbMedia/ic_k_radio_down',
            cName: '智行电台',
            status: '选中',
            path: 'icon/png_music',
            width: 48,
            height: 48,
            flag: 0
          }, {
            name: 'ic_play',
            uploadName: 'UsbMedia/ic_play',
            cName: '播放',
            status: '默认',
            path: 'icon/png_music',
            width: 49,
            height: 48,
            flag: 0
          }, {
            name: 'ic_play_down',
            uploadName: 'UsbMedia/ic_play_down',
            cName: '播放',
            status: '默认',
            path: 'icon/png_music',
            width: 49,
            height: 48,
            flag: 0
          }, {
            name: 'ic_radio',
            uploadName: 'UsbMedia/ic_radio',
            cName: '电台',
            status: '默认',
            path: 'icon/png_music',
            width: 52,
            height: 52,
            flag: 0
          }, {
            name: 'ic_radio_down',
            uploadName: 'UsbMedia/ic_radio_down',
            cName: '电台',
            status: '默认',
            path: 'icon/png_music',
            width: 52,
            height: 52,
            flag: 0
          }, {
            name: 'usbmedia_ic_search',
            uploadName: 'UsbMedia/ic_search',
            cName: '搜索',
            status: '默认',
            path: 'icon/png_music',
            width: 48,
            height: 48,
            flag: 0
          }, {
            name: 'ic_seek_down',
            uploadName: 'UsbMedia/ic_seek_down',
            cName: '上一曲',
            status: '默认',
            path: 'icon/png_music',
            width: 48,
            height: 48,
            flag: 0
          }, {
            name: 'ic_seek_down_down',
            uploadName: 'UsbMedia/ic_seek_down_down',
            cName: '上一曲',
            status: '默认',
            path: 'icon/png_music',
            width: 48,
            height: 48,
            flag: 0
          }, {
            name: 'ic_seek_up',
            uploadName: 'UsbMedia/ic_seek_up',
            cName: '下一曲',
            status: '默认',
            path: 'icon/png_music',
            width: 48,
            height: 48,
            flag: 0
          }, {
            name: 'ic_seek_up_down',
            uploadName: 'UsbMedia/ic_seek_up_down',
            cName: '下一曲',
            status: '默认',
            path: 'icon/png_music',
            width: 48,
            height: 48,
            flag: 0
          }, {
            name: 'ic_step_down',
            uploadName: 'UsbMedia/ic_step_down',
            cName: '减',
            status: '默认',
            path: 'icon/png_music',
            width: 48,
            height: 48,
            flag: 0
          }, {
            name: 'ic_step_down_down',
            uploadName: 'UsbMedia/ic_step_down_down',
            cName: '减',
            status: '默认',
            path: 'icon/png_music',
            width: 48,
            height: 48,
            flag: 0
          }, {
            name: 'ic_step_up',
            uploadName: 'UsbMedia/ic_step_up',
            cName: '加',
            status: '默认',
            path: 'icon/png_music',
            width: 48,
            height: 48,
            flag: 0
          }, {
            name: 'ic_step_up_down',
            uploadName: 'UsbMedia/ic_step_up_down',
            cName: '加',
            status: '默认',
            path: 'icon/png_music',
            width: 48,
            height: 48,
            flag: 0
          }, {
            name: 'ic_collect',
            uploadName: 'UsbMedia/ic_collect',
            cName: '收藏',
            status: '默认',
            path: 'icon/png_music',
            width: 58,
            height: 55,
            flag: 0
          }, {
            name: 'ic_list',
            uploadName: 'UsbMedia/ic_list',
            cName: '列表详情',
            status: '默认',
            path: 'icon/png_music',
            width: 49,
            height: 42,
            flag: 0
          }, {
            name: 'ic_list_down',
            uploadName: 'UsbMedia/ic_list_down',
            cName: '列表详情',
            status: '选中',
            path: 'icon/png_music',
            width: 58,
            height: 55,
            flag: 0
          }, {
            name: 'ic_search_down',
            uploadName: 'UsbMedia/ic_search_down',
            cName: '搜索',
            status: '选中',
            path: 'icon/png_music',
            width: 58,
            height: 55,
            flag: 0
          },

          // 设置
          {
            name: 'menu_system_arkamys_normal',
            uploadName: 'SystemSetting/menu_system_arkamys_normal',
            cName: '音效',
            status: '默认',
            path: 'icon/png_set',
            width: 53,
            height: 52,
            flag: 0
          }, {
            name: 'menu_system_arkamys_normal_press',
            uploadName: 'SystemSetting/menu_system_arkamys_normal_press',
            cName: '音效',
            status: '选中',
            path: 'icon/png_set',
            width: 52,
            height: 52,
            flag: 0
          }, {
            name: 'menu_system_bt_normal',
            uploadName: 'SystemSetting/menu_system_bt_normal',
            cName: '蓝牙',
            status: '默认',
            path: 'icon/png_set',
            width: 53,
            height: 52,
            flag: 0
          }, {
            name: 'menu_system_bt_press',
            uploadName: 'SystemSetting/menu_system_bt_press',
            cName: '蓝牙',
            status: '选中',
            path: 'icon/png_set',
            width: 52,
            height: 52,
            flag: 0
          }, {
            name: 'menu_system_camera_normal',
            uploadName: 'SystemSetting/menu_system_camera_normal',
            cName: '摄像头',
            status: '默认',
            path: 'icon/png_set',
            width: 53,
            height: 52,
            flag: 0
          }, {
            name: 'menu_system_camera_press',
            uploadName: 'SystemSetting/menu_system_camera_press',
            cName: '摄像头',
            status: '选中',
            path: 'icon/png_set',
            width: 52,
            height: 52,
            flag: 0
          }, {
            name: 'menu_system_network_normal',
            uploadName: 'SystemSetting/menu_system_network_normal',
            cName: '网络',
            status: '默认',
            path: 'icon/png_set',
            width: 53,
            height: 52,
            flag: 0
          }, {
            name: 'menu_system_network_press',
            uploadName: 'SystemSetting/menu_system_network_press',
            cName: '网络选中',
            status: '默认',
            path: 'icon/png_set',
            width: 52,
            height: 52,
            flag: 0
          }, {
            name: 'menu_system_normal',
            uploadName: 'SystemSetting/menu_system_normal',
            cName: '设置',
            status: '默认',
            path: 'icon/png_set',
            width: 52,
            height: 52,
            flag: 0
          }, {
            name: 'menu_system_press',
            uploadName: 'SystemSetting/menu_system_press',
            cName: '设置选中',
            status: '默认',
            path: 'icon/png_set',
            width: 52,
            height: 52,
            flag: 0
          }, {
            name: 'menu_system_other_normal',
            uploadName: 'SystemSetting/menu_system_other_normal',
            cName: '其他',
            status: '默认',
            path: 'icon/png_set',
            width: 53,
            height: 52,
            flag: 0
          }, {
            name: 'menu_system_other_press',
            uploadName: 'SystemSetting/menu_system_other_press',
            cName: '其他',
            status: '选中',
            path: 'icon/png_set',
            width: 52,
            height: 52,
            flag: 0
          }, {
            name: 'menu_system_time_normal',
            uploadName: 'SystemSetting/menu_system_time_normal',
            cName: '时间',
            status: '默认',
            path: 'icon/png_set',
            width: 53,
            height: 52,
            flag: 0
          }, {
            name: 'menu_system_time_press',
            uploadName: 'SystemSetting/menu_system_time_press',
            cName: '时间',
            status: '选中',
            path: 'icon/png_set',
            width: 52,
            height: 52,
            flag: 0
          }, {
            name: 'menu_system_voice_normal',
            uploadName: 'SystemSetting/menu_system_voice_normal',
            cName: '语音',
            status: '默认',
            path: 'icon/png_set',
            width: 53,
            height: 52,
            flag: 0
          }, {
            name: 'menu_system_voice_press',
            uploadName: 'SystemSetting/menu_system_voice_press',
            cName: '语音',
            status: '选中',
            path: 'icon/png_set',
            width: 52,
            height: 52,
            flag: 0
          },

          // {
          // name: 'car_nav_online_music_selected',
          // uploadName: 'SystemUI/car_nav_online_music_selected',
          // cName: '酷我音乐',
          // status: '选中',
          // path: 'SystemUI/res/drawable-mdpi',
          // width: 92,
          // height: 84,
          // flag: 0
          // },

          {
            name: 'car_nav_online_radio_normal',
            uploadName: 'SystemUI/car_nav_online_radio_normal',
            cName: '考拉FM',
            status: '默认',
            path: 'SystemUI/res/drawable-mdpi',
            width: 92,
            height: 84,
            flag: 0
          }, {
            name: 'car_nav_online_radio_selected',
            uploadName: 'SystemUI/car_nav_online_radio_selected',
            cName: '考拉FM',
            status: '选中',
            path: 'SystemUI/res/drawable-mdpi',
            width: 92,
            height: 84,
            flag: 0
          }, {
            name: 'car_nav_common_radio_normal',
            uploadName: 'SystemUI/car_nav_common_radio_normal',
            cName: '收音机',
            status: '默认',
            path: 'SystemUI/res/drawable-mdpi',
            width: 92,
            height: 84,
            flag: 0
          }, {
            name: 'car_nav_common_radio_selected',
            uploadName: 'SystemUI/car_nav_common_radio_selected',
            cName: '收音机',
            status: '选中',
            path: 'SystemUI/res/drawable-mdpi',
            width: 92,
            height: 84,
            flag: 0
          }, {
            name: 'car_nav_bt_music_normal',
            uploadName: 'SystemUI/car_nav_bt_music_normal',
            cName: '蓝牙音乐',
            status: '默认',
            path: 'SystemUI/res/drawable-mdpi',
            width: 92,
            height: 84,
            flag: 0
          },
          // {
          // name: 'car_nav_bt_music_selected',
          // uploadName: 'SystemUI/car_nav_bt_music_selected',
          // cName: '蓝牙音乐',
          // status: '选中',
          // path: 'SystemUI/res/drawable-mdpi',
          // width: 92,
          // height: 84,
          // flag: 0
          // },{
          // name: 'car_nav_usb_music_normal',
          // uploadName: 'SystemUI/car_nav_usb_music_normal',
          // cName: 'USB音乐',
          // status: '默认',
          // path: 'SystemUI/res/drawable-mdpi',
          // width: 92,
          // height: 84,
          // flag: 0
          // },{
          // name: 'car_nav_usb_music_selected',
          // uploadName: 'SystemUI/car_nav_usb_music_selected',
          // cName: 'USB音乐',
          // status: '选中',
          // path: 'SystemUI/res/drawable-mdpi',
          // width: 92,
          // height: 84,
          // flag: 0
          // },

          /* {
             name: 'ic_list',
             uploadName: 'Radio/ic_list',
             cName: '菜单',
             status: '选中',
             path: 'Radio/res/drawable-mdpi',
             width: 49,
             height: 42,
             flag: 0
           }, {
             name: 'ic_list_down',
             uploadName: 'Radio/ic_list_down',
             cName: '菜单',
             status: '按下',
             path: 'Radio/res/drawable-mdpi',
             width: 49,
             height: 42,
             flag: 0
           }, {
             name: 'ic_fm_sel',
             uploadName: 'Radio/ic_fm_sel',
             cName: 'FM',
             status: '选中',
             path: 'Radio/res/drawable-mdpi',
             width: 147,
             height: 74,
             flag: 0
           }, {
             name: 'ic_fm_down',
             uploadName: 'Radio/ic_fm_down',
             cName: 'FM',
             status: '按下',
             path: 'Radio/res/drawable-mdpi',
             width: 147,
             height: 74,
             flag: 0
           }, {
             name: 'ic_fm',
             uploadName: 'Radio/ic_fm',
             cName: 'FM',
             status: '正常',
             path: 'Radio/res/drawable-mdpi',
             width: 147,
             height: 74,
             flag: 0
           }, {
             name: 'ic_am_sel',
             uploadName: 'Radio/ic_am_sel',
             cName: 'AM',
             status: '选中',
             path: 'Radio/res/drawable-mdpi',
             width: 147,
             height: 74,
             flag: 0
           }, {
             name: 'ic_am_down',
             uploadName: 'Radio/ic_am_down',
             cName: 'AM',
             status: '按下',
             path: 'Radio/res/drawable-mdpi',
             width: 147,
             height: 74,
             flag: 0
           }, {
             name: 'ic_am',
             uploadName: 'Radio/ic_am',
             cName: 'AM',
             status: '正常',
             path: 'Radio/res/drawable-mdpi',
             width: 147,
             height: 74,
             flag: 0
           }, {
             name: 'ic_step_down',
             uploadName: 'Radio/ic_step_down',
             cName: '减',
             status: '正常',
             path: 'Radio/res/drawable-mdpi',
             width: 59,
             height: 58,
             flag: 0
           }, {
             name: 'ic_step_down_down',
             uploadName: 'Radio/ic_step_down_down',
             cName: '减',
             status: '按下',
             path: 'Radio/res/drawable-mdpi',
             width: 59,
             height: 58,
             flag: 0
           }, {
             name: 'ic_step_up',
             uploadName: 'Radio/ic_step_up',
             cName: '加',
             status: '正常',
             path: 'Radio/res/drawable-mdpi',
             width: 59,
             height: 58,
             flag: 0
           }, {
             name: 'ic_step_up_down',
             uploadName: 'Radio/ic_step_up_down',
             cName: '加',
             status: '按下',
             path: 'Radio/res/drawable-mdpi',
             width: 59,
             height: 58,
             flag: 0
           }, {
             name: 'ic_collected',
             uploadName: 'Radio/ic_collected',
             cName: '喜欢',
             status: '选中',
             path: 'Radio/res/drawable-mdpi',
             width: 58,
             height: 55,
             flag: 0
           }, {
             name: 'ic_collect',
             uploadName: 'Radio/ic_collect',
             cName: '喜欢',
             status: '正常',
             path: 'Radio/res/drawable-mdpi',
             width: 58,
             height: 55,
             flag: 0
           }, {
             name: 'ic_bw1',
             uploadName: 'Radio/ic_bw1',
             cName: '播放背景图',
             status: '',
             path: 'Radio/res/drawable-mdpi',
             width: 820,
             height: 108,
             flag: 0
           },*/
          // {
          // name: 'ic_searching',
          // cName: '播放加载图',
          // status: '',
          // path: 'Radio/res/drawable-mdpi',
          // width: 64,
          // height: 64,
          // flag: 0
          // },
          {
            name: 'shadow',
            uploadName: 'Radio/shadow',
            cName: '阴影图',
            status: '',
            path: 'Radio/res/drawable-mdpi',
            width: 64,
            height: 64,
            flag: 0
          },

          // {
          // name: 'ic_search',
          // uploadName: 'Radio/ic_search',
          // cName: '搜索',
          // status: '默认',
          // path: 'Radio/res/drawable-mdpi',
          // width: 55,
          // height: 39,
          // flag: 0
          // },{
          // name: 'ic_search_down',
          // uploadName: 'Radio/ic_search_down',
          // cName: '阴影图',
          // status: '按下',
          // path: 'Radio/res/drawable-mdpi',
          // width: 55,
          // height: 39,
          // flag: 0
          // }

          /*{
            name: 'ic_pause',
            uploadName: 'Radio/ic_pause',
            cName: '暂停',
            status: '正常',
            path: 'Radio/res/drawable-mdpi',
            width: 115,
            height: 115,
            flag: 0
          }, {
            name: 'ic_pause_down',
            uploadName: 'Radio/ic_pause_down',
            cName: '暂停',
            status: '按下',
            path: 'Radio/res/drawable-mdpi',
            width: 115,
            height: 115,
            flag: 0
          }, {
            name: 'ic_play',
            uploadName: 'Radio/ic_play',
            cName: '播放',
            status: '正常',
            path: 'Radio/res/drawable-mdpi',
            width: 115,
            height: 115,
            flag: 0
          }, {
            name: 'ic_play_down',
            uploadName: 'Radio/ic_play_down',
            cName: '播放',
            status: '按下',
            path: 'Radio/res/drawable-mdpi',
            width: 115,
            height: 115,
            flag: 0
          }, {
            name: 'ic_seek_down',
            uploadName: 'Radio/ic_seek_down',
            cName: '上一曲',
            status: '正常',
            path: 'Radio/res/drawable-mdpi',
            width: 50,
            height: 52,
            flag: 0
          }, {
            name: 'ic_seek_down_down',
            uploadName: 'Radio/ic_seek_down_down',
            cName: '上一曲',
            status: '按下',
            path: 'Radio/res/drawable-mdpi',
            width: 50,
            height: 52,
            flag: 0
          }, {
            name: 'ic_seek_up',
            uploadName: 'Radio/ic_seek_up',
            cName: '下一曲',
            status: '正常',
            path: 'Radio/res/drawable-mdpi',
            width: 50,
            height: 52,
            flag: 0
          }, {
            name: 'ic_seek_up_down',
            uploadName: 'Radio/ic_seek_up_down',
            cName: '下一曲',
            status: '按下',
            path: 'Radio/res/drawable-mdpi',
            width: 50,
            height: 52,
            flag: 0
          },*/

        ],
        leftarea:true,
        jfm_leftnav01: true,
        jfm_leftnav02: false,
        jt_nav_f: true,
        jzt_index: true,
        jzt_sraech: false,
        jzt_post: false,
        jzt_my: false,
        jmusci:false,
        jmusci_fm:false,
        jmusci_kl:false,
        jset:false,
        jfm_leftnav_h: true,
        activejindex: ''
      }
    },
    mounted() {
      var _this = this;
      _this.getEventData();
      // _this.handleImgSelect('voice', 'icon_music', 'icon_select')
      _this.themeId = _this.GetQueryString('themeId');
      if (_this.GetQueryString('preview')) {
        _this.editable = false;
      }
      // console.log("themeId: " + _this.themeId);
    },
    methods: {
      changeIndex(val, index, subVal) {
        /*this.jindex01 = false;
        this.jindex02 = false;
        this.jindex03 = false;
        this.jindex04 = false;
        if (index === '1') {
          this.jindex01 = true;
        } else if (index === '2') {
          this.jindex02 = true
        } else if (index === '3') {
          this.jindex03 = true
        } else if (index === '4') {
          this.jindex04 = true
        }
        this.activejindex = index*/
        this.changeTab(index, subVal, this)
      },
      validateToken() {
        let catchUser = localStorage.user
        if (!catchUser || catchUser === undefined) {
          return false;
        }
        let user = JSON.parse(catchUser);
        let expireTime = user.expireTime
        const now = new Date().getTime();
        if (!expireTime || expireTime < now) {
          return false;
        }
        return true;
      },
      // 获取token
      getToken() {
        if (this.validateToken()) {
          return JSON.parse(localStorage.user).token
        }
      },


      defaultImg(icon) {
        return 'this.src="' + require('@/assets/theme/' + icon) + '"'
      },
      GetQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
      },
      selectRecommend(item) {
        // console.log(item)
        const that = this;
        for (var key in that.iconsFlag) {
          var oldKey = key;
          var newKey = key;
          // let iconname = item.name
          let itemKey = item.uploadName.lastIndexOf('/') > -1 ? item.uploadName.slice(item.uploadName.lastIndexOf("/") + 1) : item.uploadName
          if (newKey == itemKey) {
            that.iconsFlag[oldKey] = that.getImgUrl(item.iconPath);
            eventBus.$emit('setIconUrl', that.uploadData.iconurl);
            // console.log(that.iconsFlag[oldKey])
            let fileIconName = item.uploadName;
            let fileNameList = that.formData.fileNameList.filter(item => {
              let itemName = item.indexOf(".") > -1 ? item.slice(0, item.indexOf(".")) : item
              // console.log("item: " + item + "    ====itemName: " + itemName)
              if (itemName === fileIconName) {
                return false
              }
              return true
            })
            let iconSuffix = item.iconPath.indexOf(".") > -1 ? item.iconPath.slice(item.iconPath.indexOf(".")) : item.iconPath
            fileNameList.push(fileIconName + iconSuffix);
            that.formData.fileNameList = fileNameList
            // console.log(that.formData.fileNameList)

            let updateFileList = that.formData.updateFileList.filter(item => {
              let itemName = item.indexOf(".") > -1 ? item.slice(0, item.indexOf(".")) : item
              // console.log("item: " + item + "    ====itemName: " + itemName)
              if (itemName === fileIconName) {
                return false
              }
              return true
            })
            updateFileList.push(fileIconName + iconSuffix);
            that.formData.updateFileList = updateFileList

            let localFileList = that.formData.localFileList.filter(file => {
              let itemName = file.indexOf(":") > -1 ? file.slice(0, file.indexOf(":")) : file
              if (itemName === item.uploadName) {
                return false
              }
              return true
            })
            localFileList.push(item.uploadName + ':' + item.iconPath);
            that.formData.localFileList = localFileList

            eventBus.$emit('changePicStatus', key)
            // eventBus.$emit('setIconUrl', that.uploadData.iconurl);
            if (key == 'bg_common') {
              // console.log("bg_common")
              that.formData.panel = that.getImgUrl(item.iconPath);
            }
            eventBus.$emit('setThemeData', that.formData)
            for (var i = 0; i < that.selectedImgs.length; i++) {
              var curItem = that.selectedImgs[i];
              if (curItem.name == key) {
                curItem.flag = 1;
                break;
              }
            }
            // console.log(JSON.stringify(that.iconsFlag));
            return;
          }
        }
      },
      setIconName(name) {
        // this.uploadData['iconname'] = name.indexOf("/") != -1 ? name.slice(name.indexOf("/") + 1) : name
        // console.log("setIconName: " + name)
        this.uploadData['iconname'] = name
        // console.log(this.uploadData.iconname);
      },
      haveChangedPic(name) {
        // console.log("haveChangedPic:   " + name)
        var that = this;
        let nameTmp = name.indexOf("/") != -1 ? name.slice(name.indexOf("/") + 1) : name
        // console.log("nameTmp:   " + name)
        for (var key in that.iconsFlag) {
          if (key == nameTmp) {
            // console.log("haveChangedPic:   " + that.iconsFlag[key] )
            return that.iconsFlag[key] && true
          }
        }
        return false;
      },
      ajax(method, content, server, callback) {
        var that = this;
        var url = this.serverPath + server;
        // var timestamp = new Date().getTime()+"";
        // var	content={
        // 		'content':content,
        // 		'signature':"",
        // 		'signkey': "1",
        // 		'timestamp':timestamp
        // 	};
        var content1 = JSON.stringify(content);
        // console.log(content1);
        // if(content1){
        $.ajax({
          url: url,
          type: method,
          dataType: "JSON",
          // contentType: 'application/json',
          headers: {token: this.getToken()},
          async: true,
          data: content,
          success: function (data) {
            // console.log(data);
            if (data.code === "1") {
              callback(data.datas);
            } else {
              that.$message.error('请求失败!');
            }
          },
          error: function (data) {
            that.$message.error('请求失败!');
          }
        });
        // }
      },
      handleClose() {
        return false;
      },

// 图标上传
      handleImgSelect(path, name, name2, name3, $event) {

        /* console.log("-----------handleImgSelect--------")
       console.log(path);
       console.log(name);
       console.log(name2);
       console.log(name3);
       console.log($event);*/
        var that = this;
        that.selectedImgs = [];
        that.selectedRecommedImgs = [];
        // that.selected = true;
        // $event && $event.currentTarget.classList.toggle("selected");
        if ((name == 'wave_play' || name == 'anim_search_voice') || (name == 'recommend_00' || name == 'recommend_15' || name == 'music_00' || name == 'music_15' || name == 'service_00' || name == 'service_15' || name == 'app_00' || name == 'app_15')) {
          // console.log(1111111111111);

          that.smallFlag = true
        } else {
          that.smallFlag = false
        }
        if (path == 'voice' || path == 'SystemUI/res/drawable-mdpi' || path == 'Radio/res/drawable-mdpi' || path == 'icon/png'
          || path == 'icon/png_set' || path == 'icon/png_music' || path == 'icon/png_index') {
          that.voicePics.forEach(function (item) {
            if (name == 'recommend_00' || name == 'recommend_15' || name == 'music_00' || name == 'music_15' || name == 'service_00' || name == 'service_15' || name == 'app_00' || name == 'app_15'
              || name === 'ic_search' || name === 'prev' || name === 'next') {
              for (var i = 0; i < that.formData.fileNameList.length; i++) {
                var curItem = that.formData.fileNameList[i];
                var nName = curItem.replace('.png', '');
                if (nName.indexOf(name.slice(0, -2)) != -1 && nName.length == name.length) {
                  item.flag = 1;
                  break;
                }
              }
              if (item.name.indexOf(name.slice(0, -2)) != -1 && item.name.length == name.length) {
                that.selectedImgs.push(item);
                if (item.recommend) {
                  item.recommend.forEach(value => {
                    that.selectedRecommedImgs.push(value)
                  })
                }
              }
            } else if(item.name.indexOf(name) != -1 || (name2 && name2 == item.name)) {
              // console.log(JSON.stringify(that.selectedImgs));
              for (var i = 0; i < that.formData.fileNameList.length; i++) {
                var curItem = that.formData.fileNameList[i];
                var nName = item.name.indexOf("/") != -1 ? item.name.slice(item.name.indexOf("/") + 1) : item.name;
                if (curItem.replace('.png', '') == nName) {
                  item.flag = 1;
                  break;
                }
              }
              that.selectedImgs.push(item);
              if (item.recommend) {
                item.recommend.forEach(value => {
                  that.selectedRecommedImgs.push(value)
                })
              }
            }else if(item.name.indexOf(name) != -1 || (name3 && name3 == item.name)) {
              // console.log(JSON.stringify(that.selectedImgs));
              for (var i = 0; i < that.formData.fileNameList.length; i++) {
                var curItem = that.formData.fileNameList[i];
                var nName = item.name.indexOf("/") != -1 ? item.name.slice(item.name.indexOf("/") + 1) : item.name;
                if (curItem.replace('.png', '') == nName) {
                  item.flag = 1;
                  break;
                }
              }
              that.selectedImgs.push(item);
              if (item.recommend) {
                item.recommend.forEach(value => {
                  that.selectedRecommedImgs.push(value)
                })
              }
            }

            else if(name == 'ic_paus' && (item.name.indexOf('ic_pla') != -1 )) {
              // console.log(2222222);
              that.smallFlag = true
              that.selectedImgs.push(item);
              if (item.recommend) {
                item.recommend.forEach(value => {
                  that.selectedRecommedImgs.push(value)
                })
              }
            }

          });
          if(name == 'connect_n' || name == 'unconnect_n' ) {
            that.voicePics.forEach(function(item) {
              if ('icon_car_red' == item.name) {
                for (var i = 0; i < that.formData.fileNameList.length; i++) {
                  var curItem = that.formData.fileNameList[i];
                  var nName = item.name.indexOf("/") != -1 ? item.name.slice(item.name.indexOf("/") + 1) : item.name;
                  if (curItem.replace('.png', '') == nName) {
                    item.flag = 1;
                    break;
                  }
                }
                that.selectedImgs.push(item);
                if (item.recommend) {
                  item.recommend.forEach(value => {
                    that.selectedRecommedImgs.push(value)
                  })
                }
              }
            });
          }
        } else if (path == 'service') {
          that.servicePics.forEach(function (item) {
            if (item.name.indexOf(name) != -1) {
              for (var i = 0; i < that.formData.fileNameList.length; i++) {
                var curItem = that.formData.fileNameList[i];
                var nName = item.name.indexOf("/") != -1 ? item.name.slice(item.name.indexOf("/") + 1) : item.name;
                if (curItem.replace('.png', '') == nName) {
                  item.flag = 1;
                  break;
                }
              }
              that.selectedImgs.push(item);
              if (item.recommend) {
                item.recommend.forEach(value => {
                  that.selectedRecommedImgs.push(value)
                })
              }
            }
          });
        } else if (path == 'app') {
          if (name == 'icon_setting') {
            that.selectedImgs = [{
              name: 'icon_setting',
              cName: '设置',
              status: '默认',
              path: 'app',
              width: 186,
              flag: 1,
              height: 186
            }];
          } else {
            that.appPics.forEach(function (item) {
              if(item.name.indexOf(name) != -1) {
                for (var i = 0; i < that.formData.fileNameList.length; i++) {
                  var curItem = that.formData.fileNameList[i];
                  var nName = item.name.indexOf("/") != -1 ? item.name.slice(item.name.indexOf("/") + 1) : item.name;
                  if (curItem.replace('.png', '') == nName) {
                    item.flag = 1;
                    break;
                  }
                }
                that.selectedImgs.push(item);
                if (item.recommend) {
                  item.recommend.forEach(value => {
                    that.selectedRecommedImgs.push(value)
                  })
                }
              }
            });
          }
        } else if (path == 'negative') {
          that.negativePics.forEach(function (item) {
            if (item.name.indexOf(name) != -1) {
              for (var i = 0; i < that.formData.fileNameList.length; i++) {
                var curItem = that.formData.fileNameList[i];
                var nName = item.name.indexOf("/") != -1 ? item.name.slice(item.name.indexOf("/") + 1) : item.name;
                if (curItem.replace('.png', '') == nName) {
                  item.flag = 1;
                  break;
                }
              }
              if (name == 'btn_bluetooth_') {
                if (item.name == 'btn_bluetooth_phone_n') {

                } else {
                  that.selectedImgs.push(item);
                  if (item.recommend) {
                    item.recommend.forEach(value => {
                      that.selectedRecommedImgs.push(value)
                    })
                  }
                }
              } else {
                that.selectedImgs.push(item);
                if (item.recommend) {
                  item.recommend.forEach(value => {
                    that.selectedRecommedImgs.push(value)
                  })
                }
              }
            } else if (name == 'btn_bluetooth_' && (item.name.indexOf('bluetooth_') != -1 && item.name.length == 12)) {
              that.smallFlag = true
              that.selectedImgs.push(item);
              if (item.recommend) {
                item.recommend.forEach(value => {
                  that.selectedRecommedImgs.push(value)
                })
              }
            } else if (name == 'btn_reset_' && (item.name.indexOf('data_') != -1 && item.name.length == 7)) {
              that.smallFlag = true
              that.selectedImgs.push(item);
              if (item.recommend) {
                item.recommend.forEach(value => {
                  that.selectedRecommedImgs.push(value)
                })
              }
            } else if (name == 'btn_hotspot_' && (item.name.indexOf('spot_') != -1 && item.name.length == 7)) {
              that.smallFlag = true
              that.selectedImgs.push(item);
              if (item.recommend) {
                item.recommend.forEach(value => {
                  that.selectedRecommedImgs.push(value)
                })
              }
            } else if (name == 'btn_wifi_' && (item.name.indexOf('wifi_') != -1 && item.name.length == 10)) {
              that.smallFlag = true
              that.selectedImgs.push(item);
              if (item.recommend) {
                item.recommend.forEach(value => {
                  that.selectedRecommedImgs.push(value)
                })
              }
            }
          });
        } else if (path == 'controller') {
          that.controllerPics.forEach(function (item) {
            if (name == 'bg_item_select' && (item.name == 'bg_main_item_select.9' || item.name == 'bg_menu_select')) {
              that.selectedImgs.push(item);
              if (item.recommend) {
                item.recommend.forEach(value => {
                  that.selectedRecommedImgs.push(value)
                })
              }
            } else if (name == 'background_category' && item.name == 'background_preference_selected') {
              that.selectedImgs.push(item);
              if (item.recommend) {
                item.recommend.forEach(value => {
                  that.selectedRecommedImgs.push(value)
                })
              }
            } else if (name == 'bg_dialog_big' && (item.name == 'horizontal_divider_line' || item.name == 'divide_vertical' || item.name == 'bg_button_big' || item.name == 'bg_button_big_long')) {
              that.selectedImgs.push(item);
              if (item.recommend) {
                item.recommend.forEach(value => {
                  that.selectedRecommedImgs.push(value)
                })
              }
            } else if (name == 'dialog_bg_middle' && (item.name == 'divide_line' || item.name == 'divide_vertical' || item.name == 'dialog_bg_button' || item.name == 'dialog_bg_button_long')) {
              that.selectedImgs.push(item);
              if (item.recommend) {
                item.recommend.forEach(value => {
                  that.selectedRecommedImgs.push(value)
                })
              }
            }
            if (item.name.indexOf(name) != -1 || name2 == item.name) {
              for (var i = 0; i < that.formData.fileNameList.length; i++) {
                var curItem = that.formData.fileNameList[i];
                var nName = item.name.indexOf("/") != -1 ? item.name.slice(item.name.indexOf("/") + 1) : item.name;
                if (curItem.replace('.png', '').replace('.webp', '') == nName) {
                  item.flag = 1;
                  break;
                }
              }
              that.selectedImgs.push(item);
              if (item.recommend) {
                item.recommend.forEach(value => {
                  that.selectedRecommedImgs.push(value)
                })
              }
            }
          });
        }
        // console.log(that.selectedImgs)
        // console.log(that.selectedRecommedImgs)
        setTimeout(function () {
          //设置选中控件列表高度
          that.cH = document.querySelector('li.last').offsetTop + 260;
          that.BScroll.refresh();
        }, 300)
      },
      handleImgSelectFromSidebar(name, path) {
        // console.log(name);
        // console.log(path);
        var that = this;
        // var name = name.indexOf("/") != -1 ? name.slice(name.indexOf("/") + 1) : name;
        var name = name.replace('.png', '').replace('.webp', '')
        that.selectedImgs = [];
        that.selectedRecommedImgs = [];
        if (path == 'voice') {
          that.voicePics.forEach(function (item) {
            if (item.name == name) {
              for (var i = 0; i < that.formData.fileNameList.length; i++) {
                var curItem = that.formData.fileNameList[i];
                var nName = item.name.indexOf("/") != -1 ? item.name.slice(item.name.indexOf("/") + 1) : item.name;
                if (curItem.replace('.png', '') == nName) {
                  item.flag = 1;
                  break;
                }
              }
              that.selectedImgs.push(item);
            }
          });
        } else if (path == 'service') {
          // that.servicePics.forEach(function (item) {
          //   if (item.name == name) {
          //     for (var i = 0; i < that.formData.fileNameList.length; i++) {
          //       var curItem = that.formData.fileNameList[i];
          //       var nName = item.name.indexOf("/") != -1 ? item.name.slice(item.name.indexOf("/") + 1) : item.name;
          //       if (curItem.replace('.png', '') == nName) {
          //         item.flag = 1;
          //         break;
          //       }
          //     }
          //     that.selectedImgs.push(item);
          //   }
          // });
        } else if (path == 'app') {
          // that.appPics.forEach(function (item) {
          //   if (item.name == name) {
          //     for (var i = 0; i < that.formData.fileNameList.length; i++) {
          //       var curItem = that.formData.fileNameList[i];
          //       var nName = item.name.indexOf("/") != -1 ? item.name.slice(item.name.indexOf("/") + 1) : item.name;
          //       if (curItem.replace('.png', '') == nName) {
          //         item.flag = 1;
          //         break;
          //       }
          //     }
          //     that.selectedImgs.push(item);
          //   }
          // });
        } else if (path == 'negative') {
          // that.negativePics.forEach(function (item) {
          //   if (item.name == name && that.selectedImgs.length < 3) {
          //     for (var i = 0; i < that.formData.fileNameList.length; i++) {
          //       var curItem = that.formData.fileNameList[i];
          //       var nName = item.name.indexOf("/") != -1 ? item.name.slice(item.name.indexOf("/") + 1) : item.name;
          //       if (curItem.replace('.png', '') == nName) {
          //         item.flag = 1;
          //         break;
          //       }
          //     }
          //     that.selectedImgs.push(item);
          //   }
          // });
        } else if (path == 'controller') {
          that.controllerPics.forEach(function (item) {
            if (item.name == name) {
              for (var i = 0; i < that.formData.fileNameList.length; i++) {
                var curItem = that.formData.fileNameList[i];
                var nName = item.name.indexOf("/") != -1 ? item.name.slice(item.name.indexOf("/") + 1) : item.name;
                if (curItem.replace('.png', '').replace('.webp', '') == nName) {
                  item.flag = 1;
                  break;
                }
              }
              that.selectedImgs.push(item);
            }
          });
        }

      },
      handleImgSelectBg($event, path, name) {
        // console.log(name);
        // console.log(path);
        // console.log($event);
        var that = this;
        if (name == 'bg_common' && that.desktop) {
          that.selectedImgs = [];
          that.selectedRecommedImgs = [];
          that.voicePics.forEach(function (item) {
            if (item.name.indexOf(name) != -1) {
              for (var i = 0; i < that.formData.fileNameList.length; i++) {
                var curItem = that.formData.fileNameList[i];
                var nName = item.name.indexOf("/") != -1 ? item.name.slice(item.name.indexOf("/") + 1) : item.name;
                if (curItem.replace('.png', '') == nName) {
                  item.flag = 1;
                  break;
                }
              }
              that.selectedImgs.push(item);
            }
          });
        }

      },
      handleSelect(key, keyPath) {
        var that = this;
        // console.log(that.editable);
        // console.log(key);
        // console.log(keyPath);
        if (!that.editable) {
          eventBus.$emit('eventFromM', key)
          var picName = '';
          that.desktop = false;
          if (key == 1) {
            that.desktop = true;
            picName = 'icon_recommend';
          } else if (key == 2) {
            // 音乐
            that.passive = true;
            that.navbar = true;
            that.rightarea = true;
            that.voice = true;
            that.service = false;
            that.negative = false;
            that.settings_1 = false;
            that.settings_2 = false;
            that.settings_3 = false;
            that.settings_4 = false;
            that.settings_5 = false;
            that.settings_6 = false;
            that.settings_7 = false;
            that.showStatbar = true;
            that.isFilter = false;
            that.app = false;
            that.moduleMenuIndex = 2;
            picName = 'icon_music';
          } else if (key == 3) {
            //服务
            that.passive = true;
            that.navbar = true;
            that.rightarea = true;
            that.voice = false;
            that.service = true;
            that.negative = false;
            that.settings_1 = false;
            that.settings_2 = false;
            that.settings_3 = false;
            that.settings_4 = false;
            that.settings_5 = false;
            that.settings_6 = false;
            that.settings_7 = false;
            that.showStatbar = true;
            that.isFilter = false;
            that.app = false;
            that.moduleMenuIndex = 3;
            picName = 'icon_service';
          } else if (key == 4) {
            //应用中心
            that.voice = false;
            that.service = false;
            that.app = true;
            that.negative = false;
            that.passive = true;
            that.navbar = true;
            that.rightarea = false;
            that.settings_1 = false;
            that.settings_2 = false;
            that.settings_3 = false;
            that.settings_4 = false;
            that.settings_5 = false;
            that.settings_6 = false;
            that.settings_7 = false;
            that.showStatbar = true;
            that.isFilter = false;
            that.moduleMenuIndex = 4;
            setTimeout(function () {
              that.rightarea = true;
            }, 300);
            picName = 'icon_application';
          }
          that.selectedImgs = [];
          that.selectedRecommedImgs = [];
        }
        // if(key == 1) {
        //       picName = 'icon_recommend';
        // } else if(key == 2) {
        //       // 音乐
        //       picName = 'icon_music';
        // } else if(key == 3) {
        //       picName = 'icon_service';
        // } else if(key == 4) {
        //       //应用中心
        //       picName = 'icon_application';
        // }
        // console.log("picName:  " + picName);
        picName && that.voicePics.forEach(function(item) {
          if(item.name.indexOf(picName) != -1 || item.name == 'icon_select') {
            for(var i = 0; i < that.formData.fileNameList.length; i++) {
              var curItem = that.formData.fileNameList[i];
              var nName = item.name.indexOf("/") != -1 ? item.name.slice(item.name.indexOf("/") + 1) : item.name;
              if (curItem.replace('.png', '') == nName) {
                item.flag = 1;
                break;
              }
            }
            that.selectedImgs.push(item);
          }
        });
      },
      removePic(name) {
        // console.log("----removePic start ----")
        var that = this;
        var iconUrl = that.formData.iconUrl ? that.formData.iconUrl : that.uploadData.iconurl;
        /* console.log(that.formData.iconUrl);
      console.log(that.uploadData.iconname);
      console.log(iconUrl);
      console.log(name);*/
        let newName = name.indexOf("/") != -1 ? name.slice(name.indexOf("/") + 1) : name;
        let uploadName = that.uploadData.iconname
        let suffix = that.uploadData.iconSuffix ? that.uploadData.iconSuffix : '.png'
        let fileUrl = iconUrl + '/' + name + suffix; // 默认
        // 如果是更新，防止zai /tmp下一层;name: SystemUI/car_nav_online_radio_normal
        // uploadName: tmp/SystemUI/car_nav_online_radio_normal
        if (name != uploadName) {
          fileUrl = that.iconsFlag[newName];
        }
        // console.log("fileUrl:     " + fileUrl)
        fileUrl = fileUrl.indexOf('?') > -1 ? fileUrl.slice(0, fileUrl.indexOf("?")) : fileUrl
        /*console.log("fileUrl:     " + fileUrl)
    console.log("uploadName:     " + uploadName)
    console.log("name:     " + name)*/
        // 创建或更新时，可删除
        // console.log(that.formData.themeId)
        if (that.formData.themeId == null || (uploadName && name != uploadName)) {
          that.ajax("post", {
            "fileUrl": fileUrl
          }, "theme/deleteIcon", function (data) {
            that.removePicAction(name, newName)
          });
        } else {
          that.removePicAction(name, newName)
        }
      },
      removePicAction(name, newName) {
        var that = this;
        // console.log("------removePicAction-----")
        // console.log(data)
        /* console.log(name)
      console.log(newName)
      console.log(that.iconsFlag[newName])
      console.log(that.formData)
      console.log("======")*/
        if (name && that.iconsFlag[newName]) {
          // console.log(111111111)
          that.iconsFlag[newName] = "";
          // console.log( that.selectedImgs[that.selectedImgs.length - 1])
          for (var i = 0; i < that.selectedImgs.length; i++) {
            var curItem = that.selectedImgs[i];
            if (curItem.name == newName) {
              curItem.flag = 0;
              break;
            }
          }
          /* let index = that.formData.fileNameList.indexOf(name);
        console.log(index)
        if (index > -1) {
          that.formData.fileNameList.splice(index, 1)
        }*/
          that.formData.fileNameList = that.formData.fileNameList.filter(item => {
            let itemName = item.indexOf(".") > -1 ? item.slice(0, item.indexOf(".")) : item
            if (itemName === name) {
              return false
            }
            return true
          })
          that.formData.localFileList = that.formData.localFileList.filter(item => {
            let itemName = item.indexOf(":") > -1 ? item.slice(0, item.indexOf(":")) : item
            if (itemName === name) {
              return false
            }
            return true
          })
          // console.log(that.formData.fileNameList)
          eventBus.$emit('setThemeData', that.formData)
          eventBus.$emit('changePicStatus', newName, 0)
        }
        // console.log("----removePic end ----")
      },
      handleSuccess(res, file) {
        // console.log(JSON.stringify(res));
        // res.data.file
        // console.log("111" +JSON.stringify(file));
        // console.log("222" + URL.createObjectURL(file.raw));
        // const pName = file.name.slice(0, -4);
        const that = this;
        console.log("iconname: " + that.uploadData.iconname);
        console.log("handlesuccess uploadFlag : " + that.uploadFlag);
        console.log(that.uploadData);
        // 0621 如果几个模块有重复的名称
        var newIconName = that.handleSameIcon(that.uploadData.iconname)
        if (that.uploadFlag) {
          for (var key in that.iconsFlag) {
            // console.log(key)
            // console.log(that.uploadData.iconname);
            var oldKey = key;
            var newKey = key;
            // var newKey = newKey.indexOf("/") != -1 ? newKey.slice(newKey.indexOf("/") + 1) : newKey;
            if (newKey == newIconName) {
              // that.iconsFlag[key] = URL.createObjectURL(file.raw);
              // that.iconsFlag[oldKey] = that.imgPath + res.datas + '?' + new Date().getTime();
              that.iconsFlag[oldKey] = that.iconUrlPrefix + res.datas + '?' + new Date().getTime();
              // 去除时间后缀
              // that.iconsFlag[oldKey] = that.iconUrlPrefix + res.datas;
              console.log("-------------handle start---------")
              let fileIconName = that.uploadData.iconname;
              let fileNameList = that.formData.fileNameList.filter(item => {
                let itemName = item.indexOf(".") > -1 ? item.slice(0, item.indexOf(".")) : item
                // console.log("item: " + item + "    ====itemName: " + itemName)
                if (itemName === fileIconName) {
                  return false
                }
                return true
              })
              fileNameList.push(fileIconName + that.uploadData.iconSuffix);
              that.formData.fileNameList = fileNameList
              // console.log(that.formData.fileNameList)

              let updateFileList = that.formData.updateFileList.filter(item => {
                let itemName = item.indexOf(".") > -1 ? item.slice(0, item.indexOf(".")) : item
                // console.log("item: " + item + "    ====itemName: " + itemName)
                if (itemName === fileIconName) {
                  return false
                }
                return true
              })
              updateFileList.push(fileIconName + that.uploadData.iconSuffix);
              that.formData.updateFileList = updateFileList
              console.log("-------------handleSucess---------")
              console.log(that.formData.updateFileList)
              console.log(that.formData.fileNameList)
              console.log('oldKey ' + oldKey);
              console.log('newKey ' + newKey);
              console.log('22222222222 ' + that.uploadData.iconurl);
              console.log('2222222222222 ' + that.iconsFlag[oldKey]);
              console.log(that.iconsFlag[oldKey]);
              eventBus.$emit('changePicStatus', key)
              eventBus.$emit('setIconUrl', that.uploadData.iconurl);
              if (key == 'bg_common') {
                // console.log("bg_common")
                that.formData.panel = res.datas;
              }
              eventBus.$emit('setThemeData', that.formData)
              console.log("-------------handle selectedImgs---------")
              for (var i = 0; i < that.selectedImgs.length; i++) {
                var curItem = that.selectedImgs[i];
                if (curItem.name == key) {
                  console.log(curItem.name)
                  curItem.flag = 1;
                  break;
                }
              }
              // console.log(JSON.stringify(that.iconsFlag));
              return;
            }
          }
        }
      },
      onchange(file,fileList) {
        // console.log("------------on")
        //   console.log("_this.uploadData.iconname:  " + this.uploadData.iconname)
        //   console.log("_this.uploadData.uploadFlag:  " + this.uploadFlag)
        return;
        var _this = this;
        var event = event || window.event;
        var file = event.target.files[0];
        var reader = new FileReader();
        //转base64
        if (_this.uploadFlag) {
          reader.onload = function (e) {
            // console.log(e.target.result);
            for (var key in _this.iconsFlag) {
              // console.log(key)
              // console.log(that.uploadData.iconname);
              if (key == _this.uploadData.iconname) {
                if (_this.beforeUpload(file)) {
                  eventBus.$emit('changePicStatus', key)
                  // console.log("onchang:  " + e.target.result)
                  _this.iconsFlag[key] = e.target.result;
                }
                return;
              }
            }
          }
          reader.readAsDataURL(file);
        }
      },
      handleSameIcon(oldName) {
        var newName;
        if (Object.is(oldName, 'UsbMedia/ic_search')) {
          newName = 'usbmedia_ic_search'
        } else {
          newName = oldName.indexOf("/") != -1 ? oldName.slice(oldName.indexOf("/") + 1) : oldName;
        }
        return newName
      },
      beforeUpload(file) {
        // console.log('2222' + JSON.stringify(file));
        // console.log(file);

        const isSVG = file.type === 'image/svg+xml';
        const _this = this;
        const isPNG = file.type === 'image/png';
        const pNameC = _this.uploadData['iconname'];//file.name.slice(0, -4);
        // console.log("pNameC: " + pNameC)
        // console.log(pNameC === 'UsbMedia/ic_search')
        var pName = _this.handleSameIcon(pNameC);
        let width = '';
        let height = '';
        let flag = false;
        console.log("pName   " + pName);
        if (!flag) {
          // console.log( _this.voicePics)
          for (var i = 0, len = _this.voicePics.length; i < len; i++) {
            const item = _this.voicePics[i];
            if (item) {
              // console.log( 1)
              // if(item.name.indexOf(pName) != -1) {
              var nName = item.name.indexOf("/") != -1 ? item.name.slice(item.name.indexOf("/") + 1) : item.name;
              // console.log(nName)
              if (nName == pName) {
                console.log(nName)
                console.log("长度：" + item.width + ' ' + item.height);
                width = item.width;
                height = item.height;
                flag = true;
                break;
              }
            }
          }
        }
        // console.log(222222);
        if(!flag) {
          for(var i = 0, len = _this.servicePics.length; i < len; i++) {
            const item = _this.servicePics[i];
            var nName = item.name.indexOf("/") != -1 ? item.name.slice(item.name.indexOf("/") + 1) : item.name;
            if(nName == pName) {
              width = item.width;
              height = item.height;
              flag = true;
              break;
            }
          }
        }
        if(!flag) {
          for(var i = 0, len = _this.appPics.length; i < len; i++) {
            const item = _this.appPics[i];
            var nName = item.name.indexOf("/") != -1 ? item.name.slice(item.name.indexOf("/") + 1) : item.name;
            if(nName == pName) {
              width = item.width;
              height = item.height;
              flag = true;
              break;
            }
          }
        }
        if(!flag) {
          for(var i = 0, len = _this.negativePics.length; i < len; i++) {
            const item = _this.negativePics[i];
            var nName = item.name.indexOf("/") != -1 ? item.name.slice(item.name.indexOf("/") + 1) : item.name;
            if(nName == pName) {
              width = item.width;
              height = item.height;
              flag = true;
              break;
            }
          }
        }
        if(!flag) {
          for(var i = 0, len = _this.controllerPics.length; i < len; i++) {
            const item = _this.controllerPics[i];
            var nName = item.name.indexOf("/") != -1 ? item.name.slice(item.name.indexOf("/") + 1) : item.name;
            if(nName == pName) {
              width = item.width;
              height = item.height;
              flag = true;
            }
          }
        }
        // if(!flag) {
        //   this.$message.error('上传图片尺寸不对!');
        //   return false;
        // }

        // console.log(width);
        if (pName.indexOf('scrollbar_thumb_vertical') != -1 || pName.indexOf("scrollbar_track_vertical") != -1) {
          if (file.type != 'image/webp') {
            this.$message.error('上传图片只能是 webp 格式!');
            return false;
          }
        } else if (isPNG) {
          _this.uploadData.iconSuffix = ".png"
        } else if (isSVG) {
          _this.uploadData.iconSuffix = ".svg"
        } else {
          this.$message.error('上传图片只能是PNG或SVG格式!');
          return false;
        }

        const isSize = new Promise(function (resolve, reject) {
          // console.log(resolve);
          // console.log(reject);
          let _URL = window.URL || window.webkitURL;
          let img = new Image();
          img.onload = function () {

            console.log(width + ' ' + height);

            console.log(img.width + ' ' + img.height);

            let valid = img.width == width && img.height == height;
            valid ? resolve() : reject();
            // valid ? resolve() : resolve();
          }
          img.src = _URL.createObjectURL(file);
          // img.src = _this.iconsFlag[pName]
        }).then(() => {
          _this.uploadFlag = true;
          // console.log(_this.uploadData);
          /*// 2020-05-16注解
            if (_this.formData.themeId != null) {
              // console.log("beforeUpload:      " + _this.uploadData.iconname)
              _this.uploadData.iconname = "tmp/" + _this.uploadData.iconname
            }*/
          return file;
        }, () => {
          _this.$message.error('上传的图片必须是等于' + width + '*' + height + '!');
          _this.uploadFlag = false;
          return false;//Promise.reject();
        });
        return isSize
      },
      handleVoiceSelect(key, keyPath) {
        var that = this;
        // if(!that.editable) {
        that.selectedImgs = [];
        that.selectedRecommedImgs = [];
        that.voicePics.forEach(function (item) {
          if (item.name.indexOf('title_select') != -1) {
            that.selectedImgs.push(item);
          }
        });
        if (!that.editable) {
          that.activeIndex = key;
        }
        // if(key == 0) {
        // this.BScroll.scrollTo(0, 0);
        // this.BScroll.scrollToElement(this.$refs.scrollercont.getElementsByClassName('music-item'), 300);
        // } else if(key == 1) {
        //  this.BScroll.scrollTo(841, 0);
        // this.BScroll.scrollToElement(this.$refs.scrollercont.getElementsByClassName('radio-item'), 300);
        // } else if(key == 2) {
        //  this.BScroll.scrollTo(1682, 0);
        // this.BScroll.scrollToElement(this.$refs.scrollercont.getElementsByClassName('collect-item'), 300);
        // }
        // }
      },
      handleServiceSelect(key, keyPath) {
        var that = this;
        that.selectedImgs = [];
        that.selectedRecommedImgs = [];
        that.voicePics.forEach(function (item) {
          if (item.name.indexOf('title_select') != -1) {
            that.selectedImgs.push(item);
          }
        });
        if (!that.editable) {
          that.activeIndex2 = key;
        }
      },
      handleS1Select(key, keyPath) {
        var that = this;
        // if(!that.editable) {
        that.selectedImgs = [];
        that.selectedRecommedImgs = [];
        that.controllerPics.forEach(function (item) {
          if (item.name.indexOf('_item_select') != -1 || item.name.indexOf('bg_menu_select') != -1) {
            that.selectedImgs.push(item);
          }
        });
        // }
      },
      handleClick($event, index) {
        if (!this.editable) {
          $event.currentTarget.className = $event.currentTarget.className == 'active' ? '' : 'active'
        }
        // console.log('handleClick');
        return false;
      },
      getImgUrl(icon) {
        return require('@/assets/theme/' + icon)
      },
      getBgImgUrl(icon) {
        return 'url("' + require('@/assets/theme/' + icon) + '")'
      },
      getBgImgUrl_(icon) {
        return 'url("' + icon + '")'
      },
      changeActive($event) {
        $event.currentTarget.className = 'aui-flex-row active'
      },
      removeActive($event) {
        $event.currentTarget.className = 'aui-flex-row'
      },
      handleLookVideo() {
        if (!this.editable) {
          this.lookVideo = this.lookVideo ? false : true;
        }
      },
      changeTab(val, subVal, that) {
        that.desktop = false;
        that.centerDialogVisible = false
        that.centerDialogSmall = false;
        that.centerDialogMiddle = false;
        that.centerDialogBig = false;
        that.centerDialogToast = false;
        that.jindex = false;
        if (val == 1) {
          that.desktop = true;
          that.passive = true;
          that.navbar = false;
          that.rightarea = false;
          that.voice = false;
          that.service = false;
          that.negative = false;
          that.settings_1 = false;
          that.settings_2 = false;
          that.settings_3 = false;
          that.settings_4 = false;
          that.settings_5 = false;
          that.settings_6 = false;
          that.settings_7 = false;
          that.showStatbar = false;
          that.isFilter = false;
          that.app = false;
          that.moduleMenuIndex = 2;
          that.jfm_leftnav_h = false;

        } else if (val == 2 || val == 3  ) {
          that.leftarea = true;
          that.jset = false;
          val = subVal
          if (val == '2-1' || val == '2-2' || val == '2-3' || val == '2-4' || val == '3-1' || val == '3-2') {
            // 音乐
            that.passive = true;
            that.navbar = false;
            that.rightarea = true;
            that.voice = true;
            that.service = false;
            that.negative = false;
            that.settings_1 = false;
            that.settings_2 = false;
            that.settings_3 = false;
            that.settings_4 = false;
            that.settings_5 = false;
            that.settings_6 = false;
            that.settings_7 = false;
            that.showStatbar = false;
            that.isFilter = false;
            that.app = false;
            that.jmusci = false,
              that.moduleMenuIndex = 2;
            if (val == '2-1') {
              that.jfm_leftnav01 = true,
                that.jfm_leftnav02 = false,
                that.jfm_leftnav03 = false,
                that.jfm_leftnav04 = false,
                that.jt_nav_f = true,
                that.jzt_index = true,
                that.jzt_sraech = false,
                that.jzt_post = false,
                that.jzt_my = false,
                that.jmusci = false,

                that.jfm_leftnav_h = true

              that.activeIndex = '0';
            } else if (val == '2-2') {
              that.jfm_leftnav01 = false,
                that.jfm_leftnav02 = false,
                that.jfm_leftnav03 = false,
                that.jfm_leftnav04 = false,
                that.jt_nav_f = false,
                that.jzt_index = false,
                that.jzt_sraech = true,
                that.jzt_post = false,
                that.jzt_my = false,
                that.jmusci = false,
                that.jfm_leftnav_h = false

              that.activeIndex = '1';
            } else if (val == '2-3') {
              that.jfm_leftnav01 = false,
                that.jfm_leftnav02 = false,
                that.jfm_leftnav03 = false,
                that.jfm_leftnav04 = false,
                that.jt_nav_f = true,
                that.jzt_index = false,
                that.jzt_sraech = false,
                that.jzt_post = true,
                that.jzt_my = false,
                that.jmusci = false,
                that.jfm_leftnav_h = true

              that.activeIndex = '2';
            } else if (val == '2-4') {
              that.jfm_leftnav01 = false,
                that.jfm_leftnav02 = true,
                that.jfm_leftnav03 = false,
                that.jfm_leftnav04 = false,
                that.jt_nav_f = false,
                that.jzt_index = false,
                that.jzt_sraech = false,
                that.jzt_post = false,
                that.jzt_my = true,
                that.jmusci = false,
                that.jfm_leftnav_h = true
              that.activeIndex = '2';
            } else if (val == '3-1') {

              that.jfm_leftnav01 = false,
                that.jfm_leftnav02 = false,
                that.jfm_leftnav03 = true,
                that.jfm_leftnav04 = false,
                that.jt_nav_f = false,
                that.jzt_index = false,
                that.jzt_sraech = false,
                that.jzt_post = false,
                that.jzt_my = false,
                that.jmusci = true,
                that.jmusci_kl = false,
                that.jmusci_fm = true,
                that.jfm_leftnav_h = false

              that.iconAttributes.icRadio.icon = "ic_radio_down"
              that.iconAttributes.icKRadio.icon = "ic_k_radio"
              that.iconAttributes.icRadio.fillColor = that.formData.colorSelected
              that.iconAttributes.icKRadio.fillColor = that.formData.colorNormal
            }else if (val == '3-2') {
              that.jfm_leftnav01 = false,
                that.jfm_leftnav02 = false,
                that.jfm_leftnav03 = true,
                that.jfm_leftnav04 = false,
                that.jt_nav_f = false,
                that.jzt_index = false,
                that.jzt_sraech = false,
                that.jzt_post = false,
                that.jzt_my = false,
                that.jmusci = true,
                that.jmusci_kl = true,
                that.jmusci_fm = false,
                that.jfm_leftnav_h = false
              that.iconAttributes.icRadio.icon = "ic_radio"
              that.iconAttributes.icKRadio.icon = "ic_k_radio_down"
              that.iconAttributes.icKRadio.fillColor = that.formData.colorSelected
              that.iconAttributes.icRadio.fillColor = that.formData.colorNormal
            }
          } else {
            // 控件
            that.negative = false;
            that.passive = true;
            that.navbar = false;
            that.rightarea = false;
            that.voice = false;
            that.service = false;
            that.app = false;
            that.isFilter = false;
            that.showStatbar = true;
            that.settings_1 = false;
            that.settings_2 = false;
            that.settings_3 = false;
            that.settings_4 = false;
            that.settings_5 = false;
            that.settings_6 = false;
            that.settings_7 = false;
            if (val == '6-1') {
              that.settings_1 = true;
            } else if (val == '6-2') {
              that.settings_7 = true;
            } else if (val == '6-6') {
              that.settings_5 = true;
            } else if (val == '6-7') {
              that.settings_2 = true;
            } else if (val == '6-3') {
              that.settings_6 = true;
              that.centerDialogSmall = true;
              that.centerDialogMiddle = false;
              that.centerDialogBig = false;
              that.centerDialogToast = false;
            } else if (val == '6-4') {
              that.settings_6 = true;
              that.centerDialogSmall = false;
              that.centerDialogMiddle = true;
              that.centerDialogBig = false;
              that.centerDialogToast = false;
            } else if (val == '6-5') {
              that.settings_6 = true;
              that.centerDialogSmall = false;
              that.centerDialogMiddle = false;
              that.centerDialogBig = true;
              that.centerDialogToast = false;
            } else if (val == '6-8') {
              that.settings_6 = true;
              that.centerDialogSmall = false;
              that.centerDialogMiddle = false;
              that.centerDialogBig = false;
              that.centerDialogToast = true;
            }
          }
        } else if (val == 3) {
          //服务
          // that.passive = true;
          // that.navbar = true;
          // that.rightarea = true;
          // that.voice = false;
          // that.service = true;
          // that.negative = false;
          // that.settings_1 = false;
          // that.settings_2 = false;
          // that.settings_3 = false;
          // that.settings_4 = false;
          // that.settings_5 = false;
          // that.settings_6 = false;
          // that.settings_7 = false;
          // that.showStatbar = true;
          // that.isFilter = false;
          // that.app = false;
          // that.moduleMenuIndex = 3;
          // val = arr[1];
          // if(val == '3-1') {
          //   that.activeIndex2 = '0';
          // } else if (val == '3-2') {
          //   that.activeIndex2 = '1';
          // } else if (val == '3-3') {
          //   that.activeIndex2 = '2';
          // } else if (val == '3-4') {
          //   that.activeIndex2 = '3';
          // } else if (val == '3-5') {
          //   that.activeIndex2 = '4';
          // }
        } else if (val == 4) {
          that.leftarea = false;
          that.rightarea = false;

          that.jindex = true;
          //应用中心
          // that.voice = false;
          // that.service = false;
          // that.app = true;
          // that.negative = false;
          // that.passive = true;
          // that.navbar = true;
          // that.rightarea = false;
          // that.settings_1 = false;
          // that.settings_2 = false;
          // that.settings_3 = false;
          // that.settings_4 = false;
          // that.settings_5 = false;
          // that.settings_6 = false;
          // that.settings_7 = false;
          // that.showStatbar = true;
          // that.isFilter = false;
          // that.moduleMenuIndex = 4;
          val = subVal
          console.log(val);
          if(val == '4-1') {

            that.jindex01 = true;
            that.jindex02 = false;
            that.jindex03 = false;
            that.jindex04 = false;
            that.activejindex = '1';
            // that.activeIndex3 = '0';
            // that.scrollLeft = '0';
          } else if(val == '4-2') {

            that.jindex01 = false;
            that.jindex02 = true;
            that.jindex03 = false;
            that.jindex04 = false;
            that.activejindex = '2';

            // that.activeIndex3 = '1';
            // that.scrollLeft = '25%';
          } else if (val == '4-3') {

            that.jindex01 = false;
            that.jindex02 = false;
            that.jindex03 = true;
            that.jindex04 = false;
            that.activejindex = '3';

            // that.activeIndex3 = '2';
            // that.scrollLeft = '50%';
          } else if (val == '4-4') {
            that.jindex01 = false;
            that.jindex02 = false;
            that.jindex03 = false;
            that.jindex04 = true;

            that.activejindex = '4';
            // that.activeIndex3 = '3';
            // that.scrollLeft = '75%';
          }
          // setTimeout(function() {
          // that.rightarea = true;
          // that.initScroll()
          // }, 300);
        } else if (val == 5) {
          that.leftarea = true;
          that.rightarea = true;
          that.jfm_leftnav01 = false,
            that.jfm_leftnav02 = false,
            that.jfm_leftnav03 = false,
            that.jfm_leftnav04 = true,
            that.jt_nav_f = false,
            that.jzt_index = false,
            that.jzt_sraech = false,
            that.jzt_post = false,
            that.jzt_my = false,
            that.jmusci = false,
            that.jset = true,

            that.jfm_leftnav_h = false
          //负一屏
          // that.isFilter = true;
          // that.negative = true;
        }
      },
      call(phone) {

      },
      initScroll() {
        var _this = this;
        // _this.$refs.scrollercont_.style.width = '4000px';
        // _this.$refs.scrollercont_.style.height = '187px';
        // return
        _this.$nextTick(() => {
          // console.log(1111122222);
          // if(!_this.BScroll) {
          // _this.BScroll = new BScroll(_this.$refs.scroller, {
          //   startX: 0,
          //   scrollX: true,
          //   scrollY: false,
          //   click: false,
          //   scrollbar: false,
          //   preventDefault: false,
          //   mouseWheel: true,
          //   eventPassthrough: 'vertical'
          // })
          _this.BScroll = new BScroll(_this.$refs.scroller_, {
            scrollbar: true,
            click: false,
            preventDefault: false,
            mouseWheel: true
          })
          // } else {
          //   _this.BScroll.refresh();
          // }
        })
      },
      creatInterval() {
        setInterval(function () {
          if (_this.settings_7) {
            if (_this.playIndex == 23) {
              _this.playIndex = 1;
            } else {
              _this.playIndex += 1;
            }
          } else {
            clearInterval(playInterval);
            playInterval = null;
          }
        }, 50);
      },
      getEventData() {
        const that = this;
        eventBus.$on('setSelectedImg', function (name, path) {
          // console.log(name);
          // console.log(path);
          that.handleImgSelectFromSidebar(name, path);
        });
        eventBus.$on('eventFromN', function (arr) {
          // console.log(arr);

          if (Object.prototype.toString.call(arr) === '[object Array]') {
            let val = arr[0]
            let subVal = ''
            if (arr.length > 1) subVal = arr[1]
            that.changeTab(val, subVal, that)

          }
        });
        eventBus.$on('eventFromS', function (name, pageName) {
          // console.log(name);
          // console.log(pageName);
          that.handleImgSelectFromSidebar(name, pageName);
        });
        eventBus.$on('eventPreview', function (name, pageName) {
          // console.log("预览");
          that.editable = false;
          that.clientWidth = document.documentElement.clientWidth
          that.isScale = false;
          if (that.clientWidth - 420 > 1440) {
            that.isScale_ = true;
          }
          //  setTimeout(function() {
          //         that.initScroll()
          //       }, 300);
        });
        eventBus.$on('eventEditable', function () {
          that.editable = true;
          that.clientWidth = document.documentElement.clientWidth
          that.clientHeight = document.documentElement.clientHeight
          if (that.clientWidth <= 1440 || that.clientHeight - 354 < 433) {
            that.isScale = true;
          } else if (that.clientWidth - 420 > 1440) {
            that.isScale_ = true;
          }
        });
        //更新
        eventBus.$on('setIconUrl', function (iconurl) {
          console.log("22222  setIconUrl+ iconurl   " + iconurl);
          that.uploadData.iconurl = iconurl;
          if (!that.formData.iconUrl) {
            that.formData.iconUrl = that.iconUrlPrefix + 'theme/upload/' + iconurl;
          }
          // console.log("setIconUrl:   " + that.formData.iconUrl);
          // console.log("setIconUrl:   " + iconurl);
        }); //更新theme信息
        eventBus.$on('setThemeDataByS', function (val) {
          // console.log("setTDBS:  " + val.sysVersion)
          that.formData.themeId = val.themeId
          that.themeId = val.themeId
        });
        eventBus.$on('setff', function (val, paramName) {
          if (paramName === 'hl1FontFamily') {
            that.formData.hl1FontFamily = val
            that.formData.fontfamily = val
          } else  if (paramName === 'hl2FontFamily') {
            that.formData.hl2FontFamily = val
          } else if (paramName === 'hl3FontFamily') {
            that.formData.hl3FontFamily = val
          } else if (paramName === 'hl4FontFamily') {
            that.formData.hl4FontFamily = val
          } else if (paramName === 'hl5FontFamily') {
            that.formData.hl5FontFamily = val
          } else if (paramName === 'hl6FontFamily') {
            that.formData.hl6FontFamily = val
          } else if (paramName === 's1FontFamily') {
            that.formData.s1FontFamily = val
          } else if (paramName === 's2FontFamily') {
            that.formData.s2FontFamily = val
          } else if (paramName === 'b1FontFamily') {
            that.formData.b1FontFamily = val
          } else if (paramName === 'b2FontFamily') {
            that.formData.b2FontFamily = val
          } else if (paramName === 'btFontFamily') {
            that.formData.btFontFamily = val
          } else if (paramName === 'capFontFamily') {
            that.formData.capFontFamily = val
          } else if (paramName === 'overFontFamily') {
            that.formData.overFontFamily = val
          }
          // that.formData.fontfamily = val
        });
        eventBus.$on('setShape', function (val, paramName) {
          if (paramName === 'smallCornerSize') {
            that.formData.smallCornerSize = val
          } else if (paramName === 'mediumCornerSize') {
            that.formData.mediumCornerSize = val
          } else if (paramName === 'largeCornerSize') {
            that.formData.largeCornerSize = val
          }
        });
        eventBus.$on('setyj1', function (val) {
          that.formData.yj1 = val
        });
        eventBus.$on('setyj2', function (val) {
          that.formData.yj2 = val
        });
        eventBus.$on('setyj3', function (val) {
          that.formData.yj3 = val
        });
        eventBus.$on('setyj4', function (val) {
          that.formData.yj4 = val
        });
        eventBus.$on('setyj5', function (val) {
          that.formData.yj5 = val
        });
        eventBus.$on('setyj6', function (val) {
          that.formData.yj6 = val
        });
        eventBus.$on('setyj7', function (val) {
          that.formData.yj7 = val
        });

        eventBus.$on('setyj8', function (val) {
          that.formData.yj8 = val
        });

        eventBus.$on('setColorNormal', function (val) {
          that.formData.colorNormal = val
        });
        eventBus.$on('setColorSelected', function (val) {
          that.formData.colorSelected = val
        });
        eventBus.$on('setColorDisabled', function (val) {
          that.formData.colorDisabled = val
        });
        eventBus.$on('setColorPrimaryVariant', function (val) {
          that.formData.colorPrimaryVariant = val
        });
        eventBus.$on('setColorSecondary', function (val) {
          that.formData.colorSecondary = val
        });
        eventBus.$on('setColorBackground', function (val) {
          that.formData.colorBackground = val
        });
        eventBus.$on('setColorError', function (val) {
          that.formData.colorError = val
        });
        eventBus.$on('setColorOnSecondary', function (val) {
          that.formData.colorOnSecondary = val
        });
        eventBus.$on('setColorOnBackground', function (val) {
          that.formData.colorOnBackground = val
        });
        eventBus.$on('setColorOnSurface', function (val) {
          that.formData.colorOnSurface = val
        });
        eventBus.$on('setColorSurface', function (val) {
          that.formData.colorSurface = val
        });
        eventBus.$on('setColorOnError', function (val) {
          that.formData.colorOnError = val
        });
        eventBus.$on('setColorSecondaryVariant', function (val) {
          that.formData.colorSecondaryVariant = val
        });
        //批量上传文件
        eventBus.$on('setFilelist', function (fileList) {
          var hz = new Date().getTime();
          for (var key in that.iconsFlag) {
            for (var i = 0; i < fileList.length; i++) {
              var file = fileList[i];
              if (file.name.slice(0, -4) == key.slice(key.indexOf("/") + 1) && file.uploadPath) {
                that.iconsFlag[key] = that.imgPath + file.uploadPath + '?' + hz
                for (var j = 0; j < that.selectedImgs.length; j++) {
                  var curItem = that.selectedImgs[j];
                  if (curItem.name == key) {
                    curItem.flag = 1;
                    break;
                  }
                }
              }
            }
          }
          ;
        });
      }
    },
    created() {
      // this.activeIndex = 0;
      // this.activeIndex2 = 0;
      var _this = this;

      if (localStorage.serverPath) {
        _this.serverPath = localStorage.serverPath + "/sys/"
        _this.uploadUrl = localStorage.serverPath + "/sys/theme/upload"
        // _this.uploadUrl = localStorage.serverPath + "/v2/upload"
      }

      if (!_this.uploadData.iconurl) {
        _this.uploadData.iconurl = new Date().getTime()
      }
      _this.clientWidth = document.documentElement.clientWidth
      _this.clientHeight = document.documentElement.clientHeight
      // _this.pW = _this.pH / 0.38;
      if (_this.clientWidth <= 1440 || this.clientHeight - 354 < 433) {
        _this.isScale = true;
      } else if (_this.clientWidth - 420 > 1440) {
        _this.isScale_ = true;
      }
      this.$nextTick(() => {
        this.initScroll()
      })

      _this.ajax("post", {"dictId": _this.GetQueryString('carDeployId')}, "theme/reverseQuery", function (data) {
        console.log(data)
        if (data) {
          let brand = data.brand ? data.brand.value : ''
          console.log(data.brand)
          let type = data.type ? data.type.value : ''
          let series = data.series ? data.series.value : ''
          let model = data.model ? data.model.value : ''
          let deploy = data.deploy ? data.deploy.value : ''
          _this.vehicleInfo.brand = brand + ' ' + type
          _this.vehicleInfo.series = series + ' ' + model
          _this.vehicleInfo.deploy = deploy
        }
      })
      //获取主题详情
      _this.themeId = _this.GetQueryString('themeId');

      // 获取iconUrl的前缀
      _this.ajax("post", {"themeId": _this.themeId}, "theme/iconUrlDefault", function (data) {
        _this.iconUrlPrefix = data;
        eventBus.$emit('setIconUrlPrefix', data)
      })

      if (_this.themeId) {
        _this.uploadData.themeId = _this.themeId
        _this.ajax("post", {"themeId": _this.themeId}, "theme/getDetail", function (data) {
          // console.log(data)
          // console.log("-------")
          // console.log(_this.uploadData.iconurl)
          // console.log(_this.formData.iconUrl)
          data.updateFileList = []
          data.fileNameList = data.fileNameList ? data.fileNameList : [];
          data.localFileList = []
            _this.formData = data;
          if (data && data.iconUrl) {
            _this.uploadData.iconurl = data.iconUrl;
            var hz = new Date().getTime();
            for (var key in _this.iconsFlag) {
              for (var i = 0; i < data.fileNameList.length; i++) {
                var file = data.fileNameList[i];
                // if(file.slice(0, -4) == key.slice(key.indexOf("/") + 1)) {
                let fileWithoutSuffix = file.indexOf('.') > -1 ? file.slice(0, file.indexOf('.')) : file
                // console.log("fileWithoutSuffix: " + fileWithoutSuffix)
                // console.log("key: " + key)
                if (fileWithoutSuffix.slice(fileWithoutSuffix.indexOf("/") + 1) == key
                || (key === 'usbmedia_ic_search' && fileWithoutSuffix === 'UsbMedia/ic_search')) {
                  if (file.indexOf('.') < 0) {
                    file = file + ".png"
                  }
                  _this.iconsFlag[key] = _this.imgPath + data.iconUrl + '/' + file
                  /* 2020-05-16_this.iconsFlag[key] = _this.imgPath + data.iconUrl + '/' + file + ".png"*/
                  // for(var j = 0; j < that.selectedImgs.length; j++) {
                  //   var curItem = that.selectedImgs[j];
                  //   if(curItem.name == key) {
                  //     curItem.flag = 1;
                  //     break;
                  //   }
                  // }
                }
              }
            }
          }
          // for(var i = 0; i < data.fileNameList.length; i++) {
          //   var file = data.fileNameList[i];
          //   if(file.name.indexOf(key.slice(key.indexOf("/") + 1)) != -1 && file.uploadPath) {
          //       that.iconsFlag[key] = that.imgPath + file.uploadPath + '?' + hz
          //   }
          //   for(let i in _this.iconsFlag) {
          //     let img = new Image();
          //     img.onload = function() {
          //       console.log(i);
          //       _this.iconsFlag[i] = _this.imgPath + data.iconUrl + '/' + i + '.png'
          //       console.log(JSON.stringify(_this.iconsFlag));
          //     }
          //     img.src = _this.imgPath + data.iconUrl + '/' + i + '.png';
          //   }
          // }
          setTimeout(function () {
            eventBus.$emit('setThemeData', data, 1)
          }, 500)
          // clearInterval(_this.interval);
          // _this.interval = null;
          // _this.interval = setInterval(function() {
          //   eventBus.$emit('themeSave')
          // }, 10000)
        });
      } else {
        //  clearInterval(_this.interval);
        //           _this.interval = null;
        //           _this.interval = setInterval(function() {
        //             eventBus.$emit('themeSave')
        //           }, 10000)
        setTimeout(function () {
          eventBus.$emit('setThemeData', _this.formData)
        }, 500)
      }
      if (!_this.editable) {
        // _this.playInterval = setInterval(function() {
        //   console.log(_this.playIndex);
        //   if(_this.settings_7) {
        //     if(_this.playIndex == 23) {
        //       _this.playIndex = 1;
        //     } else {
        //       _this.playIndex += 1;
        //     }
        //   } else {
        //     clearInterval(_this.playInterval);
        //     _this.playInterval = null;
        //   }
        // }, 50);
      } else {
        //   clearInterval(_this.playInterval);
        //  _this.playInterval = null;
      }
    }
  }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  @font-face {
    font-family: 'Arista2';
    src: url("../assets/qt/GB18030.ttf");
  }

  .main {
    display: inline-block;
    width: 100%;
    /* overflow: hidden; */
    margin-top: 70px;
  }

  .main.preview {
    padding-right: 0 !important;
  }

  .player {
    margin: 20px auto;
    position: relative;
    background-size: contain;
    /* font-family: 'Arista2'; */
    -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .2);
    box-shadow: 0 3px 12px 0 rgba(0, 0, 0, .2);
    background-size: 100% 100%;
  }

  .player.scale {
    -webkit-transform: scale(0.85);
    transform: scale(0.85);
    margin: -10px auto 0;
  }

  .player.scale_ {
    -webkit-transform: scale(1.25);
    transform: scale(1.25);
    margin: 78px auto 0;
  }

  .slider {
    position: relative;
    width: 300px;
    height: 8px;
    margin: 60px auto 0;
    background-repeat: repeat-x;
    background-size: 100% 100%;
    /* background-image: url('../assets/theme/app/scrollbar_background.9.png'); */
  }

  .slider > div {
    height: 8px;
    position: absolute;
    left: 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    /* background-image: url('../assets/theme/app/scrollbar_foreground.9.png'); */
  }

  .slider > div span {
    height: 8px;
    position: absolute;
    left: -4px;
    right: -2px;
    top: 8px;
    opacity: 0.6;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    /* background-image: url('../assets/theme/app/scrollbar_shadow.9.png'); */
  }

  /* 设置 */
  .setting-box {
    position: absolute;
    left: 0;
    right: 0;
    height: 100%;
  }

  .setting-box .navbar_s {
    position: relative;
    width: 110px;
    height: 100%;
    padding-left: 40px;
    /* background-image: url('../assets/theme/controller/navi_bg_left.9.png'); */
  }

  .setting-box .navbar_s div {
    position: absolute;
    width: 86px;
    height: 100%;
    right: -10px;
    top: 0;
    background-size: 100% 100% !important;
    background-repeat: no-repeat;
  }

  .setting-box .navbar_s .bg-box {
    display: block;
    background-size: 80% 100%;
    background-repeat: no-repeat;
  }

  .setting-box .navbar_s img {
    z-index: 101;
  }

  .setting-box .menu_s {
    position: relative;
    width: 150px;
    height: 100%;
    margin-left: -13px;
    /* background-image: url('../assets/theme/controller/bg_main_left_tab.png'); */
  }

  .setting-box .menu_s .bg-box {
    display: block;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  .setting-box .menu_s .el-menu {
    padding: 10px 0;
  }

  .setting-box .menu_s .el-menu .el-menu-item {
    width: 100%;
    padding: 0 !important;
    margin: 15px 0;
    color: #ffffff;
    font-size: 16px;
    line-height: 66px;
  }

  .setting-box .menu_s .el-menu .el-menu-item.is-active {
    z-index: 101;
  }

  .setting-box .menu_s .el-menu .el-menu-item.is-active .bg-box {
    display: block;
    background-size: cover;
    /* background-size: 100% 100%; */
    /* background-size: 70% 100%; */
    background-repeat: no-repeat;
    background-position: 0 -21px;
    /* background-position: 0 25px; */
    /* background-position: 23px 5px; */
    /* background-image: url('../assets/theme/controller/bg_item_select.png'); */
  }

  .linear {
    width: 100%;
    height: 1px;
    background: linear-gradient(
      to right,
      rgba(0, 0, 0, 0) 0%,
      rgba(50, 53, 58, 0.6) 8%,
      rgba(50, 53, 58, 0.6) 92%,
      rgba(0, 0, 0, 0) 100%)
  }

  .light-striation {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 35px;
    height: 100%;
    background-size: 100% 100%;
    /* background-image: url('../assets/theme/controller/light_striation.png'); */
  }

  .baoyang .grid-content img {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    margin-bottom: 10px;
  }

  .baoyang .el-row {
    margin-bottom: 20px;
  }

  .setting-box >>> .el-dialog {
    border-radius: 0;
    background-size: 100% 100%;
    background-color: rgba(0, 0, 0, 0) !important;
    /* background-image: url('../assets/theme/controller/bg_dialog_small.png')!important; */
  }

  .setting-box >>> .el-dialog__wrapper {
    position: absolute;
  }

  .setting-box >>> .el-dialog__headerbtn, .setting-box >>> .el-dialog__header {
    display: none;
  }

  .setting-box >>> .el-dialog .el-dialog__body {
    padding: 0;
  }

  .setting-box >>> .el-dialog .el-dialog__body strong {
    font-size: 16px;
    font-style: normal;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .setting-box >>> .el-dialog .el-dialog__body > div > span {
    font-size: 20px;
    margin-bottom: 10px;
  }

  .setting-box >>> .el-dialog .el-dialog__body > div > span:last-child {
    margin-bottom: 0;
  }

  .setting-box >>> .el-dialog .dialog-footer .el-button {
    background-color: rgba(0, 0, 0, 0);;
    border-color: rgba(0, 0, 0, 0);
    font-size: 18px;
    margin: 0 22px;
  }


  .setting-box >>> .setting-tab {
    margin: 38px 0;
  }

  .setting-box >>> .el-tabs__header {
    margin: 0;
  }

  .setting-box >>> .setting-tab .el-tabs__nav-wrap {
    padding: 0 40px;
  }

  .setting-box >>> .setting-tab .el-tabs__nav-wrap::after {
    height: 0;
    background-color: rgba(0, 0, 0, 0);
  }

  .setting-box >>> .setting-tab .el-tabs__item {
    margin: 15px 5px 15px 10px;
    font-size: 16px;
    color: #ffffff !important;
  }

  .setting-box >>> .setting-tab .el-tabs__item.is-active {
    margin: 15px 5px 15px 10px;
    font-size: 17px;
    color: inherit;
    color: #fff !important;
  }

  .setting-box >>> .setting-tab .el-tabs__active-bar {
    display: none;
  }

  .setting-box >>> .setting-tab .el-tabs__content {
    padding: 15px 50px;
  }

  .setting-box >>> .setting-tab .el-tabs__content .aui-flex-col {
    margin-bottom: 20px;
  }

  .setting-box >>> .setting-tab .el-tabs__content .item-title {
    width: 180px;
    color: #ffffff;
    text-align: left;
  }

  .setting-box >>> .setting-tab .el-tabs__content .item-cont {
    padding-left: 55px;
    position: relative;
  }

  .setting-box >>> .setting-tab .el-tabs__content .item-cont .demonstration {
    color: #ffffff;
    font-size: 14px;
    display: inline-block;
    position: absolute;
    left: 0;
    top: 2px;
  }

  .setting-box >>> .setting-tab .el-tabs__content .item-cont .el-slider {
    margin-top: -3px;
  }

  .setting-box >>> .setting-tab .el-tabs__content .item-cont .el-slider .el-slider__runway {
    background-color: #3b3e45;
  }

  .setting-box >>> .setting-tab .el-tabs__content .item-cont .el-slider .el-slider__bar {
    background-size: cover;
    color: #fff;
    font-size: 18px;
    background-position: 0;
    height: 4px;
    margin-top: 1px;
    /* background-image: url('../assets/theme/controller/slider2/bg_text_tack_seekbar_progress.png'); */
  }

  .setting-box >>> .setting-tab .el-tabs__content .item-cont .el-slider .el-slider__button {
    background-size: cover;
    background-position: 0;
    height: 20px;
    border: none;
    width: 12px;
    margin-top: 3px;
    border-radius: 0;
    background-color: rgba(0, 0, 0, 0);
    /* background-image: url('../assets/theme/controller/slider2/text_tack_seekbar_slider.png'); */
  }

  .setting-box >>> .setting-tab .el-tabs__content .item-cont .el-slider .el-slider__marks-stop {
    background-color: rgba(0, 0, 0, 0);
  }

  .setting-box >>> .setting-tab .el-tabs__content .item-cont .el-slider .el-slider__marks-text {
    margin-top: -30px;
    color: inherit;
    font-size: 16px;
  }

  .search .setting-tab {
    margin-bottom: 0
  }

  .search .voicebar {
    height: 43px;
    margin: 30px 0 20px;
  }

  .search .searchbox {
    padding: 0 45px;
    overflow: hidden;
  }

  .search .searchbox .title {
    font-size: 20px;
    height: 20px;
    line-height: 20px;
    margin-top: 20px;
    text-align: left;
  }

  .search .searchbox .title span {
    float: right;
    font-size: 16px;
  }

  .search .searchbox .list {
    margin-left: -30px;
  }

  .search .searchbox .list .el-button--info {
    float: left;
    font-size: 14px;
    height: 33px;
    line-height: 33px;
    padding: 0 36px;
    background-color: #282f42;
    border-color: #282f42;
    margin: 25px 30px 20px;
    color: #fff;
  }


  .step {
    /* width: 100%;
  position: relative; */
    padding: 0 0px 60px 0;
  }

  .step strong, .download strong {
    font-size: 19px;
    text-align: left;
    float: left;
    font-style: normal;
    margin-bottom: 15px;
  }

  .step > span {
    float: right;
    font-size: 16px;
    color: #ffffff;
    margin-right: 125px;
  }

  .step ul {
    clear: both;
    width: 100%;
    overflow: hidden;
    margin-left: -55px;
  }

  .step ul li {
    width: 146px;
    height: 59px;
    line-height: 59px;
    font-size: 16px;
    float: left;
    margin: 0 0 36px 55px;
    background-size: 100% 100%;
    /* background-image: url('../assets/theme/controller/background_category.png'); */
  }

  .step .slider {
    width: 300px;
    margin-top: 42px;
    height: 10px;
  }

  .step .slider div {
    height: 6px;
    background-position: 2px 2px;
  }

  .step .slider span {
    display: block;
    height: 15px;
    position: absolute;
    left: -2px;
    right: -5px;
    top: 8px;
    opacity: 0.6;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    /* background-image: url('../assets/theme/app/scrollbar_shadow.9.png'); */
  }

  .download {
    position: relative;
    z-index: 3;
  }

  .download .navbar_s {
    position: relative;
    margin-left: 0;
    z-index: 3;
    width: 70px;
    background-size: 100% 100%;
  }

  .download .navbar_s > div, .download .downloadlist > div {
    position: absolute;
    width: 86px;
    height: 100%;
    right: -10px;
    top: 0;
    background-size: 100% 100% !important;
    background-repeat: no-repeat;
    /* background-image: url('../assets/theme/controller/navi_bg_right.9.png'); */
  }

  .download .downloadlist {
    width: 600px;
    padding: 45px 50px;
  }

  .download .downloadlist > div {
    width: 8px;
  }

  .download .downloadlist strong, .download .downloadlist .ul {
    z-index: 3;
    position: relative;
    clear: both;
    display: block;
    width: 100%;
    font-style: normal;
  }

  .download .downloadlist .ul {
    padding-top: 20px;
  }

  .download .downloadlist li {
    margin-bottom: 45px;
  }

  .download .downloadlist li > img {
    border-radius: 3px;
    -webkit-box-reflect: below 5px -webkit-linear-gradient(transparent, transparent 60%, rgba(255, 255, 255, .2));
  }

  .download .downloadlist li dl {
    text-align: left;
  }

  .download .downloadlist li dl dt {
    line-height: 20px;
    margin: 1px 0 15px;
  }

  .download .downloadlist li dl dd {
    color: #ffffff;
    font-size: 14px;
  }

  .download .downloadlist li dl dd .slider {
    position: relative;
    width: 370px;
    height: 5px;
    margin: 0;
    background-repeat: no-repeat;
    background-size: cover;
    /* background-image: url('../assets/theme/controller/slider1/progress_bg.9.png'); */
  }

  .download .downloadlist li dl dd .slider > div {
    height: 5px;
    position: absolute;
    left: 0;
    background-size: cover;
    background-repeat: no-repeat;
    /* background-image: url('../assets/theme/controller/slider1/download_progress_bar.9.png'); */
  }

  .download .downloadlist > dl.playlist {
    width: 100%;
  }

  .download .downloadlist > dl.playlist dt, .download .downloadlist > dl.playlist dd {
    position: relative;
    height: 30px;
    line-height: 30px;
    margin: 20px 0;
    font-size: 18px;
  }

  .download .downloadlist > dl.playlist dt > div:last-child, .download .downloadlist > dl.playlist dd > div:last-child {
    position: absolute;
    right: 0;
  }

  .download .downloadlist > dl.playlist dt {
    margin: 0 0 35px;
  }

  .download .downloadlist > dl.playlist dd {
    margin: 23px 0;
  }

  .download .downloadlist > dl.playlist dt div div:first-child, .download .downloadlist > dl.playlist dd div div:first-child {
    width: 40px;
  }

  .download .downloadlist > dl.playlist dd.is-active div div:nth-child(2) {
    color: #fbd9a9;
  }

  .download .downloadlist > dl.playlist dd div div:first-child img {
    display: none;
  }

  .download .downloadlist > dl.playlist dd.is-active div div:first-child img {
    display: block;
  }

  .message.setting-box .setting-tab .el-tabs__item, .message .setting-tab .el-tabs__item.is-active {
    font-size: 20px;
  }

  .message .avator {
    margin: 65px auto 0;
  }

  .message .avator > div {
    position: relative;
    height: 75px;
    width: 75px;
    padding: 4px;
    background-size: contain;
    background-color: rgba(0, 0, 0, 0);
    /* background-image: url('../assets/theme/app/iv_cover_bg.png'); */
  }

  .message .menu_s .el-menu .el-menu-item {
    margin: 5px 0;
    font-size: 18px;
  }

  .message .el-icon-s-tools {
    font-size: 24px;
    color: #ffffff;
    float: left;
    margin-left: 20px;
  }

  .message .msglist li {
    margin-bottom: 45px;
  }

  .message .msglist li > img {
    border-radius: 3px;
  }

  .message .msglist li dl {
    text-align: left;
    width: 84%;
  }

  .message .msglist li dl dt {
    color: #ffffff;
    font-size: 16px;
    line-height: 20px;
    margin: 10px 0 25px;
  }

  .message .msglist li dl dd {
    color: #ffffff;
    font-size: 14px;
  }

  .message .msglist li dl dt span {
    float: right;
    font-size: 14px;
  }

  .message .msglist li dl dd i {
    float: right;
    font-size: 18px;
  }

  .message .msglist li .linear {
    margin-top: 15px;
  }


  .player.filter:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: inherit;
    filter: blur(5px); /*为了模糊更明显，调高模糊度*/
    z-index: 2;
  }

  .negative {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1999;
    background-color: rgba(0, 0, 0, 0.8);
  }

  .navbar {
    width: 112px;
    height: 100%;
  }

  .el-menu {
    padding: 50px 5px;
    border-right: none;
    background-color: rgba(0, 0, 0, 0);
  }

  .el-menu .el-menu-item {
    width: 112px;
    height: 56px;
    margin: 28px 0;
    background-color: rgba(0, 0, 0, 0);
  }

  .el-menu .el-menu-item:hover {
    color: #fff;
    background-color: rgba(0, 0, 0, 0);
  }

  .el-menu .el-menu-item.is-active {
    background-size: cover;
    background-position: -6px;
    background-color: rgba(0, 0, 0, 0);
    /* background-image: url('../assets/theme/voice/icon_select.png'); */
  }

  .bg-box {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    z-index: 100;
    top: 0;
    background-size: cover;
    background-color: rgba(0, 0, 0, 0);
  }

  .el-menu .el-menu-item .bg-box {
    display: none;
  }

  .el-menu .el-menu-item.is-active .bg-box {
    display: block;
    /* background-image: url('../assets/theme/voice/icon_select.png'); */
  }

  .navbar .el-menu .el-menu-item.is-active .bg-box {
    background-position: -6px;
  }

  .el-menu .el-menu-item img {
    position: relative;
    z-index: 101;
  }

  .el-menu .el-menu-item img:first-child {
    width: 112px;
    height: 56px;
  }

  .el-menu .el-menu-item img.selected {
    width: 112px;
    height: 56px;
  }

  .el-menu .el-menu-item.is-active img:first-child {
    display: none !important;
  }

  .el-menu .el-menu-item.is-active img.selected {
    display: inline-block !important;
  }

  .rightarea {
    width: 670px;
    margin: 0px 0 0 0px;
    position: relative;
    float: right;
  }

  .el-menu.el-menu--horizontal {
    margin-top: 50px;
    padding: 0;
    border-bottom: none;
  }

  .el-menu.el-menu--horizontal .el-menu-item {
    width: 150px;
    height: 42px;
    line-height: 42px;
    border-bottom: none;
    margin: 0;
    font-size: 16px;
  }

  .el-menu.el-menu--horizontal .el-menu-item.is-active {
    background-size: cover;
    color: #fff;
    font-size: 18px;
    background-position: 0;
    /* background-image: url('../assets/theme/voice/title_select.png'); */
  }

  .rightarea dl {
    height: 170px;
    width: 750px;
    margin-top: 35px;
    float: left;
    margin-right: 91px;
  }

  .rightarea dl dt, .rightarea dl dd {
    float: left;
    width: 150px;
    height: 170px;
    position: relative;
  }

  .rightarea dl dt img, .rightarea dl dd img {
    width: 100%;
    height: 100%;
    -webkit-box-reflect: below 5px -webkit-linear-gradient(transparent, transparent 90%, rgba(255, 255, 255, .3));
  }

  .rightarea .service dl dt, .rightarea .service dl dd {
    float: left;
    width: 150px;
    height: 227px;
    position: relative;
  }

  .rightarea dl dt div {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 23px;
    padding-left: 15px;
    font-size: 18px;
    color: #fff;
    text-align: left;
    line-height: 25px;
  }

  .rightarea .service dl dt div {
    padding-left: 0;
    text-align: center;
    bottom: 48px;
  }

  .rightarea dl dd > div {
    position: absolute;
    bottom: 20px;
    height: 40px;
    line-height: 40px;
    left: 0;
    right: 0;
    color: #fff;
    font-size: 16px;
    background-size: cover;
    /* background-image: url('../assets/theme/voice/bg_service_tv.png'); */
  }

  .rightarea dl dd > div > span, .rightarea dl dd > div > img {
    position: relative;
    z-index: 101;
  }

  .rightarea dl dd > div .bg-box {
    display: block;
  }

  .rightarea dl dd.is-active {
    z-index: 100;
  }

  .rightarea dl dd.is-active img {
    z-index: 100;
  }

  .rightarea dl dd.is-active > div {
    left: -25px;
    z-index: 102;
  }

  .rightarea dl dd div.tips {
    position: absolute;
    top: 15px !important;
    height: 35px;
    line-height: 35px;
    left: 50%;
    right: 0;
    color: #fff;
    font-size: 12px;
    background-size: cover;
    /* background-image: url('../assets/theme/voice/bg_service_car_warn.png'); */
  }

  .rightarea dl dd.is-active div.tips {
    left: 40%;
    top: 5px !important;
    z-index: 100;
  }

  .rightarea dl dd div.tips.disabled {
    color: #ffffff;
  }

  /* .rightarea dl dd.is-active:after { */
  /* position: absolute;
  content: '';
  width: 210px;
  height: 230px;
  top: -28px;
  right: -20px;
  bottom: -20px;
  left: -42px;
  background-size: 100% 100%;
  background-image: url('../assets/theme/voice/bg_card_s.png'); */
  /* } */
  .rightarea dl dd.is-active > .bg-box {
    display: block;
    position: absolute;
    width: 210px;
    height: 230px;
    top: -28px;
    right: -20px;
    bottom: -20px;
    left: -42px;
    z-index: 9;
    background-color: transparent;
    background-size: 100% 100%;
  }

  .rightarea dl dd.is-active > img {
    position: absolute;
    width: 110%;
    height: 110%;
    bottom: -10px;
    left: -20px;
  }

  .rightarea .avator {
    margin-top: 85px;
  }

  .rightarea .avator > div {
    position: relative;
    height: 50px;
    width: 50px;
    padding: 4px;
    margin-right: 10px;
    background-size: contain;
    background-color: rgba(0, 0, 0, 0);
    /* background-image: url('../assets/theme/app/iv_cover_bg.png'); */
  }

  .rightarea .app .avator > div img {
    width: 38px;
    height: 38px;
  }

  .rightarea .app .avator > span {
    font-size: 18px;
  }

  .rightarea ul.app {
    width: 120%;
    overflow: hidden;
    margin-left: -20px;
  }

  .rightarea .sroller ul.app {
    width: 3950px;
    height: 100%;
  }

  .rightarea ul.app li {
    width: 140px;
    /* height: 110px; */
    margin-top: 30px;
    margin-right: 60px;
    float: left;
  }

  .rightarea ul.app li > div > img {
    width: 108px;
    height: 108px;
  }

  .rightarea ul.app li:last-child {
    margin-right: 0;
  }

  .rightarea ul.app li > div {
    width: 110px;
    height: 110px;
    /* background-color: #1f262e; */
    border-radius: 50%;
  }

  .rightarea ul.app li > span {
    display: block;
    margin-top: 20px;
  }

  .negative {
    width: 100%;
    height: 100%;
    padding: 50px 78px;
  }

  .negative strong {
    font-size: 18px;
    font-style: normal;
    float: left;
    display: block;
    width: 100%;
    margin-bottom: 20px;
    text-align: left;
  }

  .negative .l-c {
    width: 300px;
    margin-right: 60px;
  }

  .negative ul li {
    width: 75px;
    height: 75px;
    float: left;
    margin: 5px 30px 22px -5px;
  }

  .negative ul li:nth-child(3), .negative ul li:nth-child(4), .negative ul li:nth-child(7) {
    margin-right: 0;
  }

  .negative ul li:nth-child(5), .negative ul li:nth-child(6) {
    margin-left: -5px;
    margin-right: 30px;
  }

  .negative ul li:nth-child(7) {
    margin-left: 0;
  }

  .negative .l-c ul li.slider_ {
    position: relative;
    height: 173px;
    width: 75px;
    padding: 1px 0;
    margin-top: 5px;
    border-radius: 55px;
    overflow: hidden;
    margin-right: 32px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    /* background-image: url('../assets/theme/negative/slider_bg.png'); */
  }

  .negative >>> .el-slider__button {
    display: none;
  }

  .negative >>> .el-slider__runway {
    width: 75px;
    height: 173px;
    margin: 0;
    background-color: rgba(0, 0, 0, 0);
  }

  .negative >>> .el-slider__bar {
    width: 73px;
    z-index: 101;
    margin-bottom: 1px;
    background-color: #ceced0;
  }

  .negative .l-c ul li img:first-child {
    display: inline-block !important;
  }

  .negative .l-c ul li img:last-child {
    display: none !important;
  }

  .negative .l-c ul li.is-active img:first-child {
    display: none !important;
  }

  .negative .l-c ul li.is-active img:last-child {
    display: inline-block !important;
  }

  .negative .l-c ul li.slider_ img {
    position: absolute;
    bottom: 20px;
    left: 22px;
    z-index: 102;
    width: 31px;
    height: 31px;
    display: inline-block !important;
  }

  .negative ul li img {
    width: 100%;
    height: 100%;
  }

  .negative .r-c {
    width: 620px;
  }

  .negative .r-c ul {
    margin-left: -60px;
  }

  .negative .r-c ul li {
    height: auto;
    margin: 5px 0 40px 55px;
  }

  .negative .r-c ul li img {
    margin-bottom: -5px;
  }

  .progress {
    position: relative;
    width: 685px;
    height: 13px;
    margin-top: 20px;
  }

  .progress > label {
    display: block;
    height: 8px;
    width: 6px;
    background-size: cover;
    background-position: 0 1px;
    background-repeat: no-repeat;
    /* background-image: url('../assets/theme/voice/progress/seek_bar_left_fill.png'); */
  }

  .progress > label.end {
    display: block;
    height: 8px;
    width: 6px;
    background-size: cover;
    background-position: 0 1px;
    background-repeat: no-repeat;
    /* background-image: url('../assets/theme/voice/progress/seek_bar_right_unfill.png'); */
  }

  .progress > span {
    display: block;
    height: 8px;
    width: 660px;
    background-repeat: repeat-x;
    background-size: 100% 100%;
    background-position: 0 2px;
    /* background-image: url('../assets/theme/voice/progress/seek_bar_middle_unfill.9.png'); */
  }

  .progress > img {
    height: 11px;
    margin-top: 1px;
  }

  .progress > div {
    position: absolute;
    left: 5px;
    height: 8px;
    width: 660px;
    background-repeat: repeat-x;
    background-size: 100% 100%;
    background-position: 0 2px;
    /* background-image: url('../assets/theme/voice/progress/seek_bar_middle_fill.9.png'); */
  }

  .progress > div.shadow {
    top: 6px;
    left: 5px;
    right: 0;
    height: 8px;
    background-repeat: repeat-x;
  }

  .progress > div span {
    width: 5px;
    height: 10px;
    position: absolute;
    right: 0;
    background-size: 100% 100%;
    background-position: 0 1px;
    background-repeat: no-repeat;
    /* background-image: url('../assets/theme/voice/progress/seek_bar_block.png'); */
  }

  .controlbox {
    position: relative;
    height: 56px;
    margin-top: 13px;
    margin-left: 20px;
    line-height: 26px;
    text-align: left;
  }

  .controlbox > div {
    padding-left: 15px;
  }

  .controlbox > div p {
    display: block;
    margin-top: 5px;
    font-size: 18px;
    color: #fff;
  }

  .controlbox > div span {
    display: block;
    font-size: 14px;
    color: #7b828d;
  }

  .controlbox > ul {
    height: 50px;
    margin-left: 90px;
    margin-top: -5px;
  }

  .controlbox > ul li {
    width: 65px;
    height: 65px;
    margin: 0 10px;
    float: left;
  }

  .controlbox > ul li img {
    width: 100%;
    height: 100%;
  }

  .controlbox > ul li img:first-child {
    display: block;
  }

  .controlbox > ul li img:last-child {
    display: none;
  }

  .controlbox > ul li.active img:first-child {
    display: none;
  }

  .controlbox > ul li.active img:last-child {
    display: block;
  }

  .statbar {
    position: absolute;
    top: 10px;
    right: 30px;;
    line-height: 25px;
  }

  .statbar img {
    height: 18px;
    margin-left: 5px;
    margin-right: 2px;
  }

  ul.controller {
    position: relative;
    top: 24px;
    min-height: 260px;
    background-color: #f8f9fa;
  }

  /* ul.controller.scale {
  margin: -30px auto 0;
  padding-left: 30px;
} */
  ul.controller li {
    position: relative;
    float: left;
    width: 140px;
    height: 205px;
    font-size: 14px;
    line-height: 20px;
    margin: 14px 20px 20px 2px;
    text-align: left;
  }

  ul.controller.smallbox li {
    width: 70px;
    margin-top: 25px;
  }

  ul.controller li .cont {
    position: relative;
    z-index: 3;
  }

  ul.controller li .over {
    display: none;
    transition: all .2s ease;
  }

  ul.controller li.active .over {
    display: block;
    position: absolute;
    z-index: 2;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    background-color: #fff;
    -webkit-box-shadow: 0 1px 2px 2px rgba(0, 0, 0, .1);
    box-shadow: 0 3px 12px -2px rgba(0, 0, 0, .1);
  }

  ul.controller.smallbox li.active .over {
    height: auto;
  }

  ul.controller li.active .over {
    height: 230px;
  }

  ul.controller li .imgbox {
    width: 140px;
    height: 140px;
    margin-bottom: 5px;
    border: 1px solid #DCDFE6;
    background: #DCDFE6;
    /* background: rgba(239,244,246,1) */
  }

  ul.controller.smallbox li .imgbox {
    width: 70px;
    height: 70px;
    margin-bottom: 2px;
    border: 1px solid #DCDFE6;
  }

  ul.controller li.active .imgbox {
    /* border: none; */
    border-color: #139e83;
    /* background: #5b6a78; */
  }

  ul.controller li .imgbox img {
    max-width: 100%;
    max-height: 100%;
  }

  ul.controller li span, ul.controller li p {
    color: #7f8c8d;
    word-break: break-all;
    margin-left: 10px;
  }

  ul.controller.smallbox li span, ul.controller.smallbox li p {
    font-size: 12px;
    line-height: 14px;
  }

  ul.controller.smallbox li span {
    display: block;
    word-break: break-all;
  }

  ul.controller li span b {
    color: #5b6a78;
  }

  ul.controller li .btns {
    display: none;
    position: absolute;
    top: 45px;
    width: 100%;
    left: 0;
    right: 0;
    z-index: 3;
  }

  ul.controller.smallbox li .btns {
    top: 20px;
  }

  ul.controller li.active .btns {
    display: block;
    padding-left: 15px;
  }

  ul.controller.smallbox li.active .btns {
    display: block;
    padding-left: 5px;
  }

  ul.controller li.active .btns button, ul.controller li.active >>> .el-upload--picture-card {
    width: 50px;
    height: 50px;
    padding-top: 13px;
    display: inline-block;
    border-radius: 5px;
    background-color: rgba(0, 0, 0, 0.4);
    border: none;
  }

  ul.controller li.active >>> .el-upload-list {
    display: none;
  }

  ul.controller.smallbox li.active .btns button {
    width: 27px;
    height: 27px;
    padding-top: 8px;
  }

  ul.controller li.active .btns button .icon {
    font-size: 36px;
    color: #fff;
  }

  ul.controller.smallbox li.active .btns button .icon {
    font-size: 18px;
  }

  ul.controller li.active .btns button:first-child {
    margin-right: 8px;
  }

  ul.controller.smallbox li.active .btns button:first-child {
    margin-right: 3px;
  }

  ul.controller li.active >>> .el-upload--picture-card {
    line-height: 50px;
    padding-top: 13px;
    position: relative;
  }

  ul.controller li.active >>> .el-upload--picture-card button {
    position: absolute;
    top: 6px;
    left: 0;
    width: 100%;
    height: 100%;
    margin-right: 0 !important;
    padding-top: 0;
    background-color: rgba(0, 0, 0, 0);
  }

  ul.controller li .btns > div {
    position: absolute;
    width: 50px;
    height: 50px;
    display: inline-block;
  }

  ul.controller.smallbox li .btns > div {
    width: 27px;
    height: 27px;
  }

  .main > section {
    width: 1440px;
  }

  .dotbox {
    border: 1px dotted #c0392b;
  }

  .main.preview .dotbox, .main.preview .el-menu li.dotbox.is-active {
    border: none !important;
  }

  .player > .desktop {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  .el-menu li.dotbox {
    border: none !important;
  }

  .el-menu li.dotbox.is-active {
    border: 1px dotted #c0392b !important;
  }

  .el-menu li.dotbox.selected.is-active {
    border-color: #2980b9 !important;
  }

  .el-dialog >>> .el-dialog--center .el-dialog__body {
    padding: 0;
  }

  .modal {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
  }

  .avator .bg-box, li.slider_ .bg-box {
    display: block;
  }

  li.slider_ .bg-box {
    /* background-size: 100% 100%; */
    background-size: 108% 106%;
    background-position: -3px -6px;
  }

  .el-menu-item.is-disabled {
    cursor: pointer;
    opacity: 1;
  }

  .d-center.btns > div {
    left: 50%;
    transform: translateX(-50%);
  }

  .shopbox li {
    position: relative;
    float: left;
    width: 18%; /*170px;*/
    margin-right: 55px;
    margin-top: -15px;
    overflow: hidden;
  }

  .shopbox li img {
    width: 170px;
    height: 170px;
    border-radius: 5px;
    margin-bottom: 5px;
  }

  .shopbox li div {
    position: absolute;
    top: 140px;
    height: 30px;
    left: -60px;
    right: -60px;
    font-size: 12px;
    background-color: rgba(0, 0, 0, 0.4);
  }

  .shopbox li > span {
    display: block;
    font-size: 14px;
    margin-bottom: 10px;
  }

  .dialog-toast .el-dialog__body > div, .dialog-middle .el-dialog__body > div, .dialog-big .el-dialog__body > div, .dialog-small .el-dialog__body > div {
    background-size: 100% 100%;
  }

  .dialog-toast, .dialog-toast .el-dialog__body > div > div {
    width: 357px;
    height: 116px;
  }

  .dialog-middle, .dialog-middle .el-dialog__body > div > div {
    width: 495px;
    height: 380px;
  }

  .setting-box >>> .el-dialog.dialog-big, .setting-box >>> .el-dialog.dialog-big .el-dialog__body > div {
    width: 493px !important;
    height: 317px !important;
    top: 6vh;
    margin-top: 0 !important;
  }

  .setting-box >>> .el-dialog.dialog-small, .setting-box >>> .el-dialog.dialog-small .el-dialog__body > div {
    width: 425px !important;
    height: 199px !important;
    top: 6vh;
    margin-top: 0 !important;
  }

  .setting-box >>> .el-dialog .dialog-footer {
    position: relative;
    height: 56px;
    width: 100%;
    margin-top: 5px;
  }

  .setting-box >>> .el-dialog .dialog-footer .horizontal_divider_line {
    height: 2px;
    width: 98%;
    background-size: 100% 100%;
    background-position: 0 1px;
    background-repeat: no-repeat;
  }

  /* .setting-box>>>.el-dialog.dialog-big .dialog-footer .horizontal_divider_line {
  background-image: url('../assets/theme/controller/horizontal_divider_line.png');
}
.setting-box>>>.el-dialog.dialog-small .dialog-footer .horizontal_divider_line {
  background-image: url('../assets/theme/controller/divide_line.png');
} */
  .setting-box >>> .el-dialog .dialog-footer .divide_vertical {
    position: absolute;
    left: 50%;
    width: 2px;
    height: 90%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    /* background-image: url('../assets/theme/controller/divide_vertical.png'); */
  }

  .main >>> .bscroll-vertical-scrollbar {
    opacity: 1 !important;
    width: 7px !important;
    background-color: #fff !important;
  }

  .main >>> .bscroll-vertical-scrollbar .bscroll-indicator {
    background-color: rgb(215, 217, 221) !important;
  }


  .jfm_leftnav {
    width: 80px;
    height: 370px;
    display: block;
    float: left;
    margin: 0 0 0;
    text-align: center;
    font-size: 14px;
    color: #e9efff;
    position: relative
  }


  .jfm_l_box img.jfm_l_img {
    width: 65px;
    height: 56px;
    display: block;
    float: left;
    margin: -2px 12.5px 0;
  }

  .jfm_l_box .jfm_l_txt {
    width: 100%;
    height: auto;
    display: block;
    float: left;
    margin: -10px 0px 5px;
    position: relative;
    z-index: 9
  }

  .jfm_l_box i {
    width: 50px;
    height: 1px;
    background: #2d3135;
    margin: 0 20px 0px;
    display: block;
    float: left;
  }

  .jfm_lb {
    width: 28px;
    height: 24px;
    display: block;
    float: left;
    margin: 25px 0 0 40px;
  }

  .jfm_tabs {
    width: 184px;
    height: 46px;
    display: block;
    float: left;
    margin: 10px 0 0 180px;
  }

  .jfm_tabs img {
    width: 92px;
    height: 46px;
    display: block;
    float: left;
    margin: 0;
  }

  .jfm_top {
    width: 100%;
    height: auto;
    display: block;
    float: left;
    margin: 30px 0 0 0px;
  }

  .jfm_top img {
    width: 35px;
    height: 35px;
    display: block;
    float: left;
  }

  .jfm_top_l {
    margin: 0 0 0 170px;
  }

  .jfm_top_c {
    width: 250px;
    margin: -10px 0 0px;
    height: 35px;
    display: block;
    float: left;
    text-align: center;
    font-size: 15px;
    color: #e9efff;
    position: relative
  }

  .jfm_top_c span {
    font-size: 36px;
  }

  .jfm_like {
    position: absolute;
    top: 180px;
    left: 35px;
    width: 40px;
    height: 40px;
    display: block;
    float: left;
  }

  .jfm_bj {
    width: 100%;
    height: auto;
    display: block;
    float: left;
    margin: 50px 0 0 0px;
  }

  .jfm_bj img.jfm_bj1 {
    width: auto;
    height: 63px;
    display: table;
    margin: 0 auto;
  }

  .jfm_foot {
    width: 100%;
    height: auto;
    display: block;
    float: left;
    margin: 30px 0 0 0px;
  }

  .jfm_foot img.jfm_foot_topbj {
    width: 400px;
    height: 28px;
    display: table;
    float: none;
    margin: 0px auto 0px;
  }

  .jfm_foot img.jfm_foot_search {
    width: 32px;
    height: 22px;
    display: block;
    float: left;
    margin: 20px 0 0 40px;
  }

  .jfm_foot img.jfm_foot_down {
    width: 36px;
    height: 38px;
    display: block;
    float: left;
    margin: 10px 0 0 130px;
  }

  .jfm_foot img.jfm_foot_pause {
    width: 58px;
    height: 58px;
    display: block;
    float: left;
    margin: 0 0 0 55px;
  }

  .jfm_foot img.jfm_foot_up {
    width: 36px;
    height: 38px;
    display: block;
    float: left;
    margin: 10px 0 0 60px;
  }


  .fm_controlbox {
    position: relative;
    height: auto;
    margin-top: 0;
    margin-left: 0;
    text-align: left;
  }

  .fm_controlbox > ul {

  }

  .fm_controlbox > ul li {
    float: left;
  }

  .fm_controlbox > ul li:nth-child(1) img {
    width: 36px;
    height: 38px;
    display: block;
    float: left;
    margin: 10px 0 0 130px;
  }

  .fm_controlbox > ul li:nth-child(2) img {
    width: 58px;
    height: 58px;
    display: block;
    float: left;
    margin: 0 0 0 55px;
  }

  .fm_controlbox > ul li:nth-child(3) img {
    width: 36px;
    height: 38px;
    display: block;
    float: left;
    margin: 10px 0 0 60px;
  }


  .fm_controlbox > ul li img:first-child {
    display: block;
  }

  .fm_controlbox > ul li img:last-child {
    display: none;
  }

  .fm_controlbox > ul li.active img:first-child {
    display: none;
  }

  .fm_controlbox > ul li.active img:last-child {
    display: block;
  }


  .jmain_top {
    width: 100%;
    height: 60px;
    background: none;
    display: block;
    float: left;
    position: relative;
  }

  .jmain_top_l {
    width: auto;
    height: 60px;
    display: block;
    float: left;
    margin-left: 10px;
  }

  .jmain_top_l div {
    width: 45px;
    height: 60px;
    display: block;
    float: left;
    line-height: 60px;
    text-align: center;
  }

  .jmain_top_l div img {
    display: none !important;
  }

  .jmain_top_l div svg,.jmain_top_l div img{
    width: 25px;
    height: 25px;
    display: table;
    margin: 15px auto;
  }

  .jmain_top_c {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
  }

  .jmain_top_c {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
  }

  .jmain_top_cb {
    width: auto;
    height: auto;
    display: table;
    margin: 0 auto;
  }

  .jmain_top_cb1 {
    width: auto;
    height: auto;
    display: inline-block;
    margin: 12px auto 0;
    font-size: 15px;
    line-height: 18px;
  }

  .jmain_top_cb1 span {
    font-size: 12px
  }

  .jmain_top_cb2 {
    width: auto;
    height: auto;
    display: inline-block;
    margin: 10px auto 0;
    font-size: 14px;
    line-height: 10px;
  }

  .jmain_top_cb2 svg,.jmain_top_cb2 img{
    width: 28px;
    height: 28px;
    float: left;
    margin: -8px 3px 0 5px
  }

  .jmain_top_cb2 span {
    float: left;
    margin: 3px 0 0
  }

  .jmain_top_r {
    width: auto;
    height: 60px;
    display: block;
    float: right;
    margin-left: 10px;
  }

  .jmain_top_r svg,.jmain_top_r img{
    width: 20px;
    height: 20px;
    display: block;
    float: left;
    margin: 20px 3px;
  }

  .jt_nav_fh {
    width: 40px;
    height: 40px;
    text-align: center;
    margin: 00px auto 10px;
    line-height: 40px;
    cursor: pointer;
  }

  .jt_nav_fh svg,  .jt_nav_fh img{
    width: 30px;
    height: 30px;
    display: block;
    float: none;
    margin: 5px auto;
  }

  .jt_nav_zt {
    width: 100%;
    height: auto;
    text-align: center;
    margin: 0px 0 0;
    line-height: 40px;
    float: left;
    cursor: pointer;
  }

  .jt_nav_zt svg,.jt_nav_zt img{
    width: 30px;
    height: 30px;
    display: block;
    float: none;
    margin: 0 auto 0px;
  }

  .jt_nav_zt span {
    width: 100%;
    height: 20px;
    line-height: 20px;
    float: left;
    margin: 0px 0 0;
    text-align: center;
    font-size: 14px;
    display: block;
  }

  .jt_nav_fg {
    width: 70%;
    height: 1px;
    margin: 8px 15% 8px;
    line-height: 40px;
    border-bottom: 1px solid rgba(0, 0, 0, .3);
    float: right;
  }

  .jt_nav_f {
    width: 50px;
    height: 50px;
    border-radius: 50px;
    background: rgba(255, 255, 255, .12);
    margin: 8px 15px 8px;
    float: left;
    cursor: pointer;
  }

  .jt_nav_f svg,.jt_nav_f img{
    width: 30px;
    height: 30px;
    display: block;
    float: left;
    margin: 10px 10px 0px;
  }

  .jfm_leftnav_h {
    width: 1px;
    height: 300px;
    background: rgba(0, 0, 0, .3);
    top: 130px;
    display: block;
    float: left;
    position: absolute;
    right: 0;
    top: 50px;
  }

  .jzt_r {
    width: 670px;
    height: auto;
    display: block;
    float: right;
    margin: 0 auto;
  }

  .jzt_index_top {
    width: 100%;
    height: auto;
    display: block;
    float: right;
    position: relative;
    overflow: hidden;
  }

  .jzt_index_top img {
    width: 100%;
    height: auto;
    display: block;
    float: right;
  }

  .jzt_index_top span {
    width: auto;
    height: auto;
    display: block;
    float: right;
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 14px;
  }

  .jzt_index_tab {
    width: 100%;
    height: auto;
    display: block;
    float: left;
    position: relative;
    font-size: 14px;
    margin: 5px 0;
  }

  .jzt_index_tab span {
    width: auto;
    padding: 10px 22px;
    display: block;
    float: left;
    border-bottom: 2px solid rgba(0, 0, 0, 0);
  }

  .jzt_index_tab2 {
    width: 100%;
    height: auto;
    display: block;
    float: left;
    position: relative;
    font-size: 12px;
    margin: 5px 0;
  }

  .jzt_index_tab2 span {
    width: auto;
    padding: 5px 24px;
    display: block;
    float: left;
  }

  .jzt_index_zt {
    width: 100%;
    height: auto;
    display: block;
    float: left;
    overflow: hidden;
  }

  .jzt_index_ztc {
    width: 200%;
    height: auto;
    display: block;
    float: left;
  }

  .jzt_index_ztbox {
    width: 195px;
    height: auto;
    display: inline-block;
    float: left;
    position: relative;
    margin: 8px 8px 8px 0;
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer;
  }

  .jzt_index_ztbox img {
    width: 100%;
    height: auto;
    display: block;
    float: right;
  }

  .jzt_index_ztbox p {
    width: 100%;
    height: 30px;
    line-height: 30px;
    display: block;
    float: right;
    font-size: 14px;
    background: rgba(0, 0, 0, .38);
    position: absolute;
    left: 0;
    bottom: 0
  }

  .jzt_index_ztbox p span {
    float: left;
    font-size: 14px;
    margin-left: 5px;
  }

  .jzt_index_ztbox p em {
    float: right;
    font-size: 14px;
    margin-right: 5px;
  }

  .jzt_sraech_top {
    width: 600px;
    height: 40px;
    background: rgba(255, 255, 255, .3);
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2), 0px 1px 10px rgba(0, 0, 0, 0.12), 0px 4px 5px rgba(0, 0, 0, 0.14);
    border-radius: 5px;
    font-size: 14px;
  }

  .jzt_sraech_top img {
    width: 20px;
    height: 20px;
    display: block;
    float: left;
    margin: 10px 10px 0px 15px;
  }

  .jzt_sraech_top svg,  .jzt_sraech_top img {
    width: 20px;
    height: 20px;
    display: block;
    float: left;
    margin: 10px 10px 0px 15px;
  }

  .jzt_sraech_top span {
    width: 200px;
    height: 20px;
    display: block;
    float: left;
    margin: 10px 10px 0px 5px;
    line-height: 20px;
    text-align: left;
  }

  .jzt_sraech_top em {
    width: auto;
    height: 20px;
    display: block;
    float: right;
    margin: 10px 25px 0px 15px;
    line-height: 20px;
  }

  .jzt_sraech_title {
    width: 600px;
    height: 30px;
    display: block;
    float: left;
    margin: 20px 0 0;
    font-size: 14px;
    text-align: left;
  }

  .jzt_sraech_title span {
    width: auto;
    height: 20px;
    display: block;
    float: left;
  }

  .jzt_sraech_title svg,.jzt_sraech_title img{
    width: 20px;
    height: 20px;
    display: block;
    float: left;
    margin: 0px 0px 0px 10px;
  }

  .jzt_sraech_main {
    width: 600px;
    height: auto;
    display: block;
    float: left;
    margin: 0 0 15px;
    font-size: 14px;
    text-align: left;
  }

  .jzt_sraech_main span {
    width: auto;
    height: 20px;
    padding: 0 10px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    display: block;
    float: left;
    margin: 5px 8px 5px 0;
  }

  .jzt_post_top {
    width: 600px;
    height: auto;
    display: block;
    float: left;
    margin: 0 0 15px;
    font-size: 14px;
    text-align: left;
  }

  .jzt_post_top span {
    width: auto;
    height: 20px;
    padding: 0 0px 0 10px;
  }

  .jzt_post_top em {
    width: auto;
    height: 20px;
    margin: 0 0 0 10px;
  }

  .jzt_post_main {
    width: 670px;
    height: 240px;
    display: block;
    float: right;
    overflow: hidden;
    margin: 0px -10px 0px 0;
    position: relative;
  }

  .jzt_post_mainc {
    width: 1700px;
    height: 240px;
    display: block;
    float: right;
    font-size: 14px;
    text-align: left;
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2), 0px 1px 10px rgba(0, 0, 0, 0.12), 0px 4px 5px rgba(0, 0, 0, 0.14);
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 5px;
  }

  .jzt_post_mainc p {
    width: 200px;
    height: 220px;
    margin: 10px 5px;
    text-align: left;
    font-size: 14px;
    display: block;
    float: left;
    padding: 10px;
  }

  .jzt_post_mainc img {
    width: 380px;
    height: 220px;
    margin: 10px 5px;
    text-align: center;
    display: block;
    float: left;
    border-radius: 5px;
  }

  .jzt_post_f {
    width: 80%;
    height: auto;
    display: block;
    float: left;
    margin: 15px 10% 0;
  }

  .jzt_post_f01 {
    width: 50px;
    height: 50px;
    display: block;
    float: left;
  }

  .jzt_post_f01 svg,.jzt_post_f01 img{
    width: 30px;
    height: 30px;
    display: block;
    float: left;
    margin: 10px;
  }

  .jzt_post_f03 {
    width: 50px;
    height: 50px;
    display: block;
    float: right;
  }

  .jzt_post_f03 svg,.jzt_post_f03 img{
    width: 30px;
    height: 30px;
    display: block;
    float: left;
    margin: 10px;
  }

  .jzt_post_f02 {
    width: 250px;
    height: 30px;
    display: inline-block;
    float: none;
    margin: 10px auto 0;
    border-radius: 5px;
    box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2), 0px 3px 1px rgba(0, 0, 0, 0.12), 0px 2px 2px rgba(0, 0, 0, 0.14);
    font-size: 14px;
    line-height: 30px;
  }

  .jzt_my_top {
    width: 100%;
    height: atuo;
    display: block;
    float: left;
    margin: 5px 0 20px;
  }

  .jzt_my_top .jt_nav_zt {
    width: auto;
    float: left;
    margin-right: 25px;
  }

  .jzt_my_top .jt_nav_zt svg, .jzt_my_top .jt_nav_zt img {
    float: left;
  }

  .jzt_my_top .jt_nav_zt span {
    float: left;
    width: auto;
    margin: 5px 0 0 10px;
  }

  .jzt_my_main_se {
    position: absolute;
    right: 5px;
    top: 5px;
    width: 30px;
    height: 30px;
    display: block;
  }

  .jzt_my_main_se svg,  .jzt_my_main_se img{
    width: 30px;
    height: 30px;
    display: block;
    float: left;
    margin: 0px;
  }

  .jzt_my_sc {
    width: 30px;
    height: 30px;
    display: block;
    float: right;
    margin: -5px 5px 0 0;
  }

  .jzt_my_sc svg,.jzt_my_sc img{
    width: 30px;
    height: 30px;
    display: block;
    float: left;
    margin: 0px;
  }

  .jmusci_lt01{ width: 40px; height: 40px; line-height: 40px; margin: 5px 0 0 0; display: block; float: left;}

    .jmusci_lt01 svg,.jmusci_lt01 img{
    width: 30px;
    height: 30px;
    display: block;
    float: left;
    margin: 0px;
  }


  .jmusci_l{
    width: 40px; height: auto; line-height: 40px; margin: 0 0 0 0; display: block; float: left;
  }
  .jmusci_lt02{ width: 40px; height: 40px; line-height: 40px; margin: 260px 0 0 0; display: block; float: left; }

    .jmusci_lt02 svg,.jmusci_lt02 img{
    width: 30px;
    height: 30px;
    display: block;
    float: left;
    margin: 0px;
  }
  .jmusci_rf01{ width: 40px; height: 40px; line-height: 40px; margin: 260px 0 0 0; display: block; float: left; position: fixed; right:50px;bottom:26px;}

    .jmusci_rf01 svg,.jmusci_rf01 img{
    width: 30px;
    height: 30px;
    display: block;
    float: left;
    margin: 0px;
  }

  .jmusci_fm{ width: 550px; height: auto; display: block; float: left;}

  .jmusci_fm_top{ width: 100%; height: auto; display: block; float: left; font-size: 20px; text-align: center; margin: 5px 0 20px;}
    .jmusci_fm_top span{margin: 0 10px; line-height: 30px;}

  .jmusci_fm_c{width: 100%; height: auto; display: block; float: left; font-size: 20px; text-align: center; margin:30px 0 20px; text-align: center;}

.jmusci_fm_cs{width: 40px; height: 40px; line-height: 40px; display: block; float: none; display: inline-block;margin-bottom: -10px;}

    .jmusci_fm_cs svg,.jmusci_fm_cs img{
    width: 30px;
    height: 30px;
    display: block;
    float: left;
    margin: 0px;
  }
  .jmusci_fm_ct{ text-align: center;  width: auto; display: inline-block; float: none;margin-top: -20px;    width: 300px;}
  .jmusci_fm_ct span{ font-size: 40px;}
  .jmusci_fm_ct em{ font-size: 20px;}

  .jmusci_fm_f{width: 100%; height: auto; display: block; float: left; font-size: 20px; text-align: center; margin:30px 0 20px; text-align: center;}
    .jmusci_fm_f img{width: 100%; height: auto; display: block; float: left;}

  .jmusci_kl{ width: 550px; height: auto; display: block; float: left;}

.jmusci_kl_top {
  width: 100%;
  height: auto;
  display: block;
  float: left;
  font-size: 20px;
  text-align: center;
  margin: 2px 0 20px;
}
.jmusci_kl_top p, .jmusci_kl_top span{width: 100%; height: auto; display: block; float: left; }
 .jmusci_kl_top span{font-size: 20px;}

 .jmusci_kl_f{width: 100%; height: auto; display: block; float: left; font-size: 20px; text-align: center; margin:0px 0 20px; text-align: center;}
.jmusci_kl_f img{width:150px; height:150px; display: block; float: none;margin: 0 auto;}

.jmusci_kl_a{ width: 470px; height: auto; display: block;float: left;margin: 10px 0px 0 40px;}
.jmusci_kl_a span{ width:60px; font-size: 15px; height: auto; display: block;float: left; text-align: center;}

.jmusci_kl_a p{ width:350px; font-size: 20px; height: 15px; display: block;float: left; position: relative;}

.jmusci_kl_a p i{ width:350px; font-size: 20px; height:3px; display: block;float: left; position:absolute; top: 7px; left: 0; opacity: .7; }

.jmusci_kl_a p b{ width:15px; font-size: 20px; height: 15px; display: block;float: left; position:absolute; top: 0px; z-index: 9999; left: 100px; opacity: 1; border-radius: 15px; }

.jmusci_kl_bt{width: 50%;
    height: 40px;
    line-height: 40px;
    display: block;
    float: left;
    position: fixed;
    left: 28.5%;
    bottom: 26px; text-align: center;}

.jmusci_kl_ba{width: 40px; height: 40px; line-height: 40px; display: table; float: none; display: inline-block;margin:0 10px;position: relative;z-index: 0}

    .jmusci_kl_ba svg,.jmusci_kl_ba img{
    width: 30px;
    height: 30px;
    display: block;
    float: left;
    margin: 0px;
  }

.jset_l{ width: 100px; height: auto;display: block; float: left;}
.jset_lb{ width: 100%; height: auto;display: block; float: left;margin: 0 0 22px;}

.jset_lba{width: 40px; height: 40px; line-height: 40px; display: block; float: left; margin:0 10px 0 0;}

.jset_lba svg,.jset_lba img{
    width: 30px;
    height: 30px;
    display: block;
    float: left;
    margin: 0px;
  }

.jset_lba{width: auto; height: 30px; line-height: 30px; display: block; float: left; font-size: 15px;}

.jset_f{width:520px; height: auto;display: block; float: left;margin: 0 0 22px 20px;}
.jset_fb{
  width:100%; height: auto;display: block; float: left;margin: 0 0 25px;
}
.jset_fb span{ width:auto; font-size: 19px; height: auto;display: block; float: left;margin: 0 0 0;}

.jset_fb p{ width:50px;  height: auto;display: block; float: right;margin: 0 0 0; position: relative; }

.jset_fb p i{ width:50px;  height: 20px;display: block; float: right;margin: 0 0 0; position: absolute; top: 5px; right: 0; opacity: .6; border-radius: 20px; }
.jset_fb p b{ width:30px;  height: 30px;display: block; float: right;margin: 0 0 0; position: absolute; top: 0px; right: 0; opacity:1; border-radius: 30px; }


.jindex_yd{ width: 100%; height: 15px; display: block; position: fixed; left: 0; bottom: 30px; text-align: center;}
.jindex_yd em{ width:15px; height: 15px; display: inline-block; float: none; margin: 0 5px; text-align: center; opacity: .2; border-radius: 15px;cursor: pointer;}
.jindex_yd em.active{ opacity: 1; cursor:default;}


.jindex{width:100%; height: auto; display: block; float: left;margin: -50px 0 0;}

.jindex_box{ width:200px; height: 260px; display: block; float: left; position: relative;margin: 0 0px 0 42px;}
  .jindex_box2{ width:200px; height: 260px; display: block; float: left;/*background: rgba(255, 255, 255, 0.12)*/;
   /* background-image: url("https://hsae-theme-img.oss-cn-shanghai.aliyuncs.com/theme/upload/1594967842306/Launcher/index_tab_bg.png");*/
    background-size:200px 260px;
    background-repeat:no-repeat;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2), 0px 1px 10px rgba(0, 0, 0, 0.12), 0px 4px 5px rgba(0, 0, 0, 0.14);
    border-radius: 4px; position: absolute;top:0;left:0;    z-index: 0;}
.jindex_boxt{width:100%; height: auto; display: block; float: left; margin: 15px 0 0; text-align: center;font-size: 15px;}

.jindex_boxs{width:70px; height: 70px; display: block; float: left; margin: 20px 65px 0; text-align: center;font-size: 15px;position: relative;z-index: 0}

.jindex_boxs svg,.jindex_boxs img{
    width: 70px;
    height: 70px;
    display: block;
    float: left;
  }
.jindex_boxq{width:100%; height: auto; display: block; float: left; margin:15px 0 0; text-align: center;font-size: 14px;}
.jindex_boxq span{width:100%; height: auto; display: block; float: left; margin: 0px 0 0; text-align: center;font-size: 14px;}
.jindex_boxq em{width:100%; height: auto; display: block; float: left; margin: 0px 0 0; text-align: center;font-size: 13px;}

.jindex_boxf{width:100%; height: auto; display: block; float: left; margin:40px 0 0; text-align: center;font-size: 14px;}
.jindex_boxfs{width:20px; height: 20px; display: block; float: left; margin: 0px 10px 0 20px;position: relative;z-index: 0 }

.jindex_boxfs svg,.jindex_boxfs img{
    width: 20px;
    height: 20px;
    display: block;
    float: left;
    margin: 0px;
  }
.jindex_boxft{width:auto; height: auto; display: block; float: left; margin: 0px 0 0 0px; text-align: left;font-size: 14px;}

.jindex_boxs2{width:80px; height: 80px; display: block; float: left; margin: 10px 60px 0; text-align: center;font-size: 15px;position: relative;z-index: 0;}

.jindex_boxs2 svg,.jindex_boxs2 img{
    width: 80px;
    height: 80px;
    display: block;
    float: left;
    margin: 0px;
  }

.jindex_boxf2{ width: auto;margin:35px 0 0 30px;}
.jindex_boxf .jmusci_kl_ba{width: 40px; height: 40px; line-height: 40px; display: table; float: none; display: inline-block;margin:0 12px 0 0;}

  .jindex_boxf  .jmusci_kl_ba svg,.jmusci_kl_ba img{
    width: 30px;
    height: 30px;
    display: block;
    float: left;
    margin: 0px;
  }
  .jindex01_dh{width:100%; height: auto; display: block; float: left; margin: 25px 0  10px 0; text-align: left;font-size: 14px; text-align: center;position: relative;z-index: 1;}
.jindex01_dhs{width:50px; height: 50px; display: inline-block; float: none; margin: 0px 2px 0; text-align: center;font-size: 15px;}

.jindex01_dhs svg,.jindex01_dhs img{
    width: 50px;
    height: 50px;
    display: block;
    float: left;
    margin: 0px;
  }
  .jindex_boxf0{margin: 58px 20px 0 0; width:90%}

  .jindex_boxft2{width:auto; height: auto; display: block; float: right; margin: 0px 10px 0  0px; text-align: left;font-size: 12px;}

.jindex_boxf3{
    width: auto;
    margin: 50px 0 0 58px;
}


.jindex_boxf4{
    width: auto;
    margin: 50px 0 0 58px;
}

.jnr p{
    height: auto;
    display: block; float: left;
    width: 100%;
    margin: 0px 0 5px 0px;
}

.jnr{
    width: 224px; height: auto;
    display: block; float: left;
    position: fixed; top: 70px; left: 0; z-index: 999;  background: #ffffff;
    color: #139e83;
    font-size: 15px;
    text-align: left;
    padding: 10px;
  }


.jnr p span{ color: rgb(44, 62, 80);height:20px; display: block;float: left;width: 80px; text-align: right;}

.jnr p em{ height:auto; width: 120px; display: block;float: right;}
.jnr p em i{ height:auto; width: 100%; font-style: normal; display: block;float: right;}
</style>


// WEBPACK FOOTER //
// src/components/Player.vue
